From c9309d49ba0ffc0a1a3bf57dccfe95630fc7c00a Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Tue, 2 Jun 2026 16:06:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=8B=E8=BD=BD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app-store/index.html | 401 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 401 insertions(+)
 create mode 100644 app-store/index.html
diff --git a/app-store/index.html b/app-store/index.html
new file mode 100644
index 0000000..c5ef992
--- /dev/null
+++ b/app-store/index.html
@@ -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>
