406 lines
13 KiB
HTML
406 lines
13 KiB
HTML
<!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>Yumi Download</title>
|
|
<meta
|
|
name="description"
|
|
content="Download Yumi for iOS and join live voice rooms."
|
|
/>
|
|
<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: #fff;
|
|
background: #282333;
|
|
box-shadow: 0 14px 28px rgba(40, 35, 51, 0.16);
|
|
}
|
|
|
|
.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="Yumi app download">
|
|
<div class="hero">
|
|
<div class="brand">
|
|
<div class="app-icon" aria-hidden="true">
|
|
<span>Y</span>
|
|
</div>
|
|
<div>
|
|
<p class="eyebrow">App Store</p>
|
|
<h1>Yumi</h1>
|
|
</div>
|
|
</div>
|
|
<p class="summary">
|
|
Install Yumi 1.5.0 for iOS and join live voice rooms,
|
|
parties, and community events from 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="itms-services://?action=download-manifest&url=https://h5.global-interaction.com/app-store/yumi.plist"
|
|
>
|
|
<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>
|
|
<a
|
|
class="download-button android"
|
|
href="https://play.google.com/store/apps/details?id=com.org.yumiparty"
|
|
>
|
|
<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>
|
|
Download for Android
|
|
</a>
|
|
<p class="note">
|
|
Install Yumi from the App Store path on iOS or Google
|
|
Play on Android.
|
|
</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 =
|
|
'itms-services://?action=download-manifest&url=https://h5.global-interaction.com/app-store/yumi.plist';
|
|
|
|
iosInstall.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
window.location.href = iosUrl;
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|