init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,348 @@
+<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-bright": "#faf9f7",
+                    "tertiary-fixed": "#dae5dd",
+                    "on-primary-fixed-variant": "#910817",
+                    "surface-container-lowest": "#ffffff",
+                    "secondary": "#735c00",
+                    "ink-black": "#1A1A1A",
+                    "primary-fixed-dim": "#ffb3ae",
+                    "inverse-surface": "#2f3130",
+                    "on-primary": "#ffffff",
+                    "on-tertiary": "#ffffff",
+                    "error": "#ba1a1a",
+                    "secondary-fixed": "#ffe088",
+                    "on-tertiary-fixed-variant": "#3f4943",
+                    "tertiary": "#37413b",
+                    "inverse-primary": "#ffb3ae",
+                    "primary-container": "#a61d24",
+                    "on-primary-container": "#ffb9b4",
+                    "primary-fixed": "#ffdad7",
+                    "surface-dim": "#dadad8",
+                    "on-secondary-container": "#745c00",
+                    "on-error": "#ffffff",
+                    "surface-container-low": "#f4f3f1",
+                    "surface-container-highest": "#e3e2e0",
+                    "subtle-gray": "#999999",
+                    "surface-container": "#efeeec",
+                    "secondary-fixed-dim": "#e9c349",
+                    "on-tertiary-fixed": "#141e19",
+                    "surface-variant": "#e3e2e0",
+                    "on-tertiary-container": "#c2cdc6",
+                    "inverse-on-surface": "#f1f1ef",
+                    "heritage-red": "#A61D24",
+                    "outline": "#8d706e",
+                    "surface-tint": "#b3272c",
+                    "on-secondary-fixed": "#241a00",
+                    "on-secondary-fixed-variant": "#574500",
+                    "on-error-container": "#93000a",
+                    "status-blue": "#2A6EBB",
+                    "outline-variant": "#e2bebc",
+                    "success-green": "#2D6A4F",
+                    "tertiary-fixed-dim": "#bec9c2",
+                    "secondary-container": "#fed65b",
+                    "on-secondary": "#ffffff",
+                    "background": "#faf9f7",
+                    "surface": "#faf9f7",
+                    "on-background": "#1a1c1b",
+                    "error-container": "#ffdad6",
+                    "tertiary-container": "#4e5852",
+                    "on-surface": "#1a1c1b",
+                    "aged-amber": "#FFBF00",
+                    "surface-container-high": "#e9e8e6",
+                    "primary": "#820012"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "gutter-card": "12px",
+                    "stack-md": "16px",
+                    "base": "8px",
+                    "stack-lg": "32px",
+                    "stack-sm": "4px",
+                    "margin-page": "20px"
+            },
+            "fontFamily": {
+                    "body-md": ["Be Vietnam Pro"],
+                    "coupon-amount": ["Manrope"],
+                    "label-md": ["Inter"],
+                    "headline-lg-mobile": ["Manrope"],
+                    "headline-lg": ["Manrope"],
+                    "headline-xl": ["Manrope"],
+                    "headline-md": ["Manrope"],
+                    "body-lg": ["Be Vietnam Pro"]
+            },
+            "fontSize": {
+                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
+                    "coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
+                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
+                    "headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
+                    "headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
+                    "headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
+                    "headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
+                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        body {
+            background-color: #faf9f7;
+            background-image: 
+                radial-gradient(at 0% 0%, rgba(166, 29, 36, 0.03) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(255, 191, 0, 0.05) 0px, transparent 50%);
+            position: relative;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+
+        /* Subtle Parchment Texture */
+        body::before {
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.4;
+            pointer-events: none;
+            z-index: -1;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+            filter: contrast(120%) brightness(100%);
+        }
+
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            vertical-align: middle;
+        }
+
+        .login-card-shadow {
+            box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
+        }
+
+        .input-focus-ring:focus-within {
+            border-color: #A61D24;
+            box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
+        }
+
+        .login-btn-gradient {
+            background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
+        }
+
+        @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .animate-entrance {
+            animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  <style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style><style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style><style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style><style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style><style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style><style>
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        </style></head>
+<body class="flex flex-col min-h-screen px-margin-page pb-10">
+<!-- Header / Branding Section -->
+<header class="flex flex-col items-center pt-16 pb-10 text-center animate-entrance">
+<div class="relative mb-4">
+<div class="w-20 h-20 rounded-full flex items-center justify-center shadow-lg relative overflow-hidden bg-surface-bright">
+  <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
+  <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgZNvVIRyBYDv2Vp1Xp8xRJ5N1TUbfwehPbXLMn_2XYMEheSImebkftfAoS9KBLlvY6ZZL6-0U3naoHVd-CQBcPW7fk9chuLWoMQhSwcvVvFFSSHz23qX27nuprq96I5u_Y0aCV_s3vp1YLhEvBBR39RKGtL5tdpO0KHzcxu9lig6AeKcoOe4uhL-WXEC_1BeMevx2yWV1md5SWGjcMe5A6_sF9ZHGPizbOwM6DUUo5HBjcUGCuVNend46zUp3G0JZSFRG_azHZdA" alt="杜康好客" class="w-full h-full object-contain p-2 relative z-10">
+</div>
+<!-- Decorative Seal Accent -->
+
+</div>
+<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black tracking-widest mb-1">杜康好客</h1>
+<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-[0.2em] opacity-80">门店管理系统</p>
+</header>
+<!-- Main Login Container -->
+<main class="flex-grow flex flex-col items-center justify-center w-full max-w-md mx-auto animate-entrance" style="animation-delay: 0.1s;">
+<div class="w-full bg-surface-container-lowest rounded-xl p-8 login-card-shadow border border-outline-variant/10">
+<form class="space-y-6" id="loginForm">
+<!-- Phone Input -->
+<div class="space-y-2">
+<label class="font-label-md text-label-md text-on-surface-variant ml-1">手机号码</label>
+<div class="relative flex items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
+<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">phone_iphone</span>
+<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="11" placeholder="请输入您的手机号" type="tel">
+</div>
+</div>
+<!-- Verification Code Input -->
+<div class="space-y-2">
+<label class="font-label-md text-label-md text-on-surface-variant ml-1">验证码</label>
+<div class="flex gap-2">
+<div class="relative flex flex-grow items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
+<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">shield</span>
+<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="6" placeholder="验证码" type="text">
+</div>
+<button class="px-4 py-3.5 font-label-md text-label-md text-heritage-red bg-primary-fixed rounded-lg hover:bg-primary-fixed-dim transition-colors active:scale-95 duration-100 whitespace-nowrap font-semibold" type="button">
+                            获取验证码
+                        </button>
+</div>
+</div>
+<!-- Primary Login Button -->
+<button class="w-full py-4 rounded-xl text-white font-headline-md text-headline-md flex items-center justify-center gap-2 login-btn-gradient shadow-md active:scale-[0.98] transition-all mt-8 group" type="submit">
+<span class="">登录</span>
+<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
+</button>
+</form><div class="mt-6 space-y-6">
+    <div class="flex items-center gap-4">
+        <div class="h-[1px] flex-grow bg-outline-variant/30"></div>
+        <span class="text-label-md text-subtle-gray font-medium">或者</span>
+        <div class="h-[1px] flex-grow bg-outline-variant/30"></div>
+    </div>
+    <button class="w-full py-3.5 rounded-xl border border-heritage-red/20 bg-heritage-red/5 text-heritage-red font-headline-md text-headline-md flex items-center justify-center gap-2 hover:bg-heritage-red/10 active:scale-[0.98] transition-all" type="button">
+        <span class="material-symbols-outlined">chat</span>
+        <span class="">微信一键授权</span>
+    </button>
+</div>
+</div>
+<!-- Agreement Checkbox -->
+<div class="mt-8 flex items-start gap-2 max-w-[280px]">
+<div class="relative flex items-center mt-1">
+<input class="w-4 h-4 rounded border-outline-variant text-heritage-red focus:ring-heritage-red/20 bg-surface-bright" id="agreement" type="checkbox">
+</div>
+<label class="font-label-md text-label-md text-on-surface-variant leading-relaxed select-none" for="agreement">
+                我已阅读并同意 <a class="text-heritage-red font-semibold hover:underline" href="#">《用户协议》</a> 与 <a class="text-heritage-red font-semibold hover:underline" href="#">《隐私政策》</a>
+</label>
+</div>
+</main>
+<!-- Footer -->
+<footer class="mt-auto pt-10 pb-6 text-center animate-entrance" style="animation-delay: 0.3s;">
+<div class="flex items-center justify-center gap-4 mb-4">
+<div class="h-[1px] w-8 bg-outline-variant"></div>
+<div class="text-[10px] font-label-md tracking-[0.3em] text-subtle-gray uppercase">Secured by DUKANG HERITAGE</div>
+<div class="h-[1px] w-8 bg-outline-variant"></div>
+</div>
+<!-- Decorative subtle element -->
+<div class="opacity-30">
+<span class="material-symbols-outlined text-outline text-[20px]" style="font-variation-settings: 'FILL' 1;">security</span>
+</div>
+</footer>
+<!-- Background Atmospheric Effect -->
+<div class="fixed top-0 left-0 w-full h-full pointer-events-none z-[-1] overflow-hidden">
+<div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] rounded-full bg-heritage-red/5 blur-[120px]"></div>
+<div class="absolute top-[20%] -right-[5%] w-[30%] h-[30%] rounded-full bg-aged-amber/5 blur-[100px]"></div>
+</div>
+<script>
+        // Micro-interactions for the form
+        const loginForm = document.getElementById('loginForm');
+        loginForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const agreement = document.getElementById('agreement');
+            if (!agreement.checked) {
+                agreement.parentElement.classList.add('animate-shake');
+                setTimeout(() => agreement.parentElement.classList.remove('animate-shake'), 500);
+                alert('请先阅读并同意用户协议');
+                return;
+            }
+            
+            // Success visual feedback
+            const btn = loginForm.querySelector('button[type="submit"]');
+            btn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span>';
+            btn.classList.add('opacity-80');
+            
+            setTimeout(() => {
+                alert('登录请求已发送 (演示模式)');
+                btn.innerHTML = '<span>登录</span><span class="material-symbols-outlined">arrow_forward</span>';
+                btn.classList.remove('opacity-80');
+            }, 1500);
+        });
+
+        // Add shake animation style
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(-4px); }
+                75% { transform: translateX(4px); }
+            }
+            .animate-shake {
+                animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
+                animation-iteration-count: 2;
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+
+
+</body></html>