增加下载页面
This commit is contained in:
zhx
parent
06afd4e0e5
commit
c9309d49ba
401
app-store/index.html
Normal file
401
app-store/index.html
Normal file
@ -0,0 +1,401 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<title>Lalu Voice Party Download</title>
|
||||
<meta name="description" content="Download Lalu Voice Party for iOS." />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background: #f8f2ff;
|
||||
color: #282333;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
justify-content: center;
|
||||
padding: max(20px, env(safe-area-inset-top)) 18px
|
||||
max(24px, env(safe-area-inset-bottom));
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 24% 4%,
|
||||
rgba(197, 166, 246, 0.46),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
#f1e5ff 0%,
|
||||
#fffaff 42%,
|
||||
#f8f2ff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.store {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: min(100%, 430px);
|
||||
min-height: calc(100vh - 44px);
|
||||
min-height: calc(100svh - 44px);
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 28% 24%,
|
||||
#fff 0 12%,
|
||||
transparent 13%
|
||||
),
|
||||
linear-gradient(
|
||||
145deg,
|
||||
#8f5de2 0%,
|
||||
#b778ff 46%,
|
||||
#5a37b8 100%
|
||||
);
|
||||
box-shadow: 0 18px 36px rgba(94, 57, 184, 0.28);
|
||||
}
|
||||
|
||||
.app-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
bottom: -12px;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.app-icon span {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 10px rgba(48, 23, 116, 0.36);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 5px;
|
||||
color: #7d57c7;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: #282333;
|
||||
font-size: 30px;
|
||||
line-height: 1.08;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 18px 0 0;
|
||||
color: #72697f;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(232, 218, 252, 0.95);
|
||||
border-radius: 26px;
|
||||
background:
|
||||
linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.96),
|
||||
rgba(255, 255, 255, 0.74)
|
||||
),
|
||||
linear-gradient(135deg, #f6ecff, #fff);
|
||||
box-shadow: 0 18px 42px rgba(132, 90, 212, 0.14);
|
||||
}
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
width: 188px;
|
||||
height: 334px;
|
||||
transform: translateX(-50%);
|
||||
border: 8px solid #281b3e;
|
||||
border-radius: 31px;
|
||||
background: #130a2b;
|
||||
box-shadow: 0 22px 36px rgba(40, 28, 72, 0.22);
|
||||
}
|
||||
|
||||
.phone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 8px;
|
||||
width: 52px;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.screen {
|
||||
position: absolute;
|
||||
inset: 18px 10px 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 20%,
|
||||
rgba(217, 192, 255, 0.42),
|
||||
transparent 28%
|
||||
),
|
||||
linear-gradient(180deg, #251144 0%, #100720 100%);
|
||||
}
|
||||
|
||||
.screen-card {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.screen-card:first-child {
|
||||
top: 76px;
|
||||
}
|
||||
|
||||
.screen-card:nth-child(2) {
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.screen-avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 26px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(145deg, #c5a6f6, #7d57c7);
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 17px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.download-button svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.download-button.ios {
|
||||
color: #fff;
|
||||
background: #7d57c7;
|
||||
box-shadow: 0 14px 28px rgba(125, 87, 199, 0.28);
|
||||
}
|
||||
|
||||
.download-button.android {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
background: #c5a6f6;
|
||||
cursor: default;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin: 2px 0 0;
|
||||
color: #8d879a;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding: 4px 0 0;
|
||||
color: #9a90aa;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.page {
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.store {
|
||||
min-height: auto;
|
||||
padding: 34px;
|
||||
border: 1px solid rgba(232, 218, 252, 0.9);
|
||||
border-radius: 32px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 24px 60px rgba(132, 90, 212, 0.12);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="store" aria-label="Lalu Voice Party app download">
|
||||
<div class="hero">
|
||||
<div class="brand">
|
||||
<div class="app-icon" aria-hidden="true">
|
||||
<span>L</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow">App Store</p>
|
||||
<h1>Lalu Voice Party</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p class="summary">
|
||||
Install the latest Lalu Voice Party app and start using
|
||||
voice rooms on your device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="preview" aria-hidden="true">
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="screen-avatar"></div>
|
||||
<div class="screen-card"></div>
|
||||
<div class="screen-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a
|
||||
class="download-button ios"
|
||||
id="iosInstall"
|
||||
href="https://media.haiyihy.com/cc.ipa"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M16.64 13.04c-.02-2.22 1.8-3.29 1.88-3.34-1.03-1.51-2.63-1.72-3.2-1.74-1.36-.14-2.66.8-3.35.8-.69 0-1.76-.78-2.89-.76-1.49.02-2.86.87-3.62 2.2-1.54 2.67-.4 6.62 1.1 8.79.73 1.06 1.6 2.25 2.75 2.21 1.1-.04 1.52-.71 2.86-.71 1.33 0 1.71.71 2.89.69 1.19-.02 1.95-1.08 2.68-2.15.84-1.23 1.19-2.42 1.21-2.48-.03-.01-2.32-.89-2.35-3.51ZM14.43 6.53c.61-.74 1.02-1.76.91-2.78-.88.04-1.94.59-2.57 1.32-.56.65-1.06 1.69-.92 2.68.98.08 1.98-.5 2.58-1.22Z"
|
||||
/>
|
||||
</svg>
|
||||
Install for iOS
|
||||
</a>
|
||||
<button
|
||||
class="download-button android"
|
||||
type="button"
|
||||
disabled
|
||||
aria-disabled="true"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M17.6 9.48 19.44 6.3a.75.75 0 1 0-1.3-.75l-1.86 3.22A10.2 10.2 0 0 0 12 7.86c-1.52 0-2.97.32-4.28.91L5.86 5.55a.75.75 0 1 0-1.3.75L6.4 9.48C4.2 10.98 2.75 13.34 2.75 16h18.5c0-2.66-1.45-5.02-3.65-6.52ZM8.5 13.4a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Zm7 0a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Z"
|
||||
/>
|
||||
</svg>
|
||||
Android coming soon
|
||||
</button>
|
||||
<p class="note">Android download is not available yet.</p>
|
||||
</div>
|
||||
|
||||
<p class="footer">
|
||||
Use Safari on iPhone or iPad if the installation does not
|
||||
start automatically.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
(function () {
|
||||
var iosInstall = document.getElementById('iosInstall');
|
||||
var iosUrl = 'https://media.haiyihy.com/cc.ipa';
|
||||
|
||||
iosInstall.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
window.location.href = iosUrl;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user