<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>综合计费管理系统</title>
    <!-- Font Awesome 5 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif;
        }

        body {
            min-height: 100vh;
            /* 深蓝色到浅蓝色的垂直渐变 — 上面深蓝，下面浅蓝 */
            background: #0a2f44;
            background: linear-gradient(to bottom, #0a2f44 0%, #9fc9f0 60%, #e2f0ff 100%);
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .page-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
        }

        .main-content {
            flex: 1 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 2rem 1rem;
        }

        /* 登录卡片 - 半透明白色磨砂质感 */
        .login-card {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 32px;
            box-shadow: 0 25px 50px -12px rgba(0, 20, 40, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
            padding: 2.5rem 2rem;
            width: 100%;
            max-width: 460px;
            transition: all 0.3s ease;
            color: #1e2b37;
        }

        .brand {
            text-align: center;
            margin-bottom: 2rem;
        }

        .brand i {
            font-size: 3rem;
            color: #3f6b8f;
            background: rgba(255,255,255,0.5);
            padding: 0.5rem;
            border-radius: 60px;
            box-shadow: 0 10px 15px -6px rgba(0,0,0,0.05);
            margin-bottom: 0.75rem;
        }

        .brand h1 {
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: 1px;
            line-height: 1.3;
            color: #123456;
            text-shadow: 0 2px 4px rgba(255,255,255,0.8);
        }

        .brand .sub {
            font-size: 1.2rem;
            color: #2a4d6e;
            margin-top: 0.3rem;
            font-weight: 400;
            border-bottom: 1px dashed #a0b8cc;
            padding-bottom: 0.8rem;
        }

        .input-group {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 60px;
            padding: 0.6rem 1.2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 8px 18px -8px rgba(0, 30, 50, 0.15);
            border: 1px solid rgba(150, 180, 210, 0.4);
            transition: border 0.2s, box-shadow 0.2s;
        }

        .input-group:focus-within {
            border-color: #3f6b8f;
            box-shadow: 0 8px 22px -8px rgba(50, 100, 150, 0.3);
        }

        .input-group i {
            font-size: 1.2rem;
            color: #3f6b8f;
            width: 2rem;
            text-align: center;
        }

        .input-group input {
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 1rem;
            padding: 0.6rem 0;
            color: #1e2b37;
        }

        .input-group input::placeholder {
            color: #7e95a8;
            font-weight: 300;
            font-size: 0.95rem;
        }

        .login-btn {
            background: linear-gradient(145deg, #2b5a7a, #1a4058);
            border: none;
            border-radius: 60px;
            padding: 1rem 1.8rem;
            width: 100%;
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
            letter-spacing: 1.5px;
            cursor: pointer;
            box-shadow: 0 16px 24px -10px rgba(20, 60, 90, 0.3);
            transition: all 0.2s ease;
            margin-top: 0.8rem;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .login-btn:hover {
            background: linear-gradient(145deg, #347191, #1f4b66);
            transform: scale(1.02);
            box-shadow: 0 20px 28px -8px #163d52;
        }

        .login-btn:active {
            transform: scale(0.98);
        }

        /* 底部区域整体容器 */
        .footer {
            flex-shrink: 0;
            width: 100%;
            padding: 1.2rem 0.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
        }

        /* 底部通用文字样式：深蓝色加粗 */
        .footer-text {
            font-size: 1rem;
            font-weight: 700;
            color: #003a6b;
            text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
            text-align: center;
            line-height: 1.4;
        }

        .footer-text a {
            color: #003a6b;
            text-decoration: none;
            font-weight: 700;
            border-bottom: 2px solid #003a6b;
            transition: border-color 0.15s, color 0.15s;
            margin: 0 0.2rem;
        }

        .footer-text a:hover {
            border-bottom-color: #001f33;
            color: #001f33;
        }

        .footer-text span {
            margin: 0 0.3rem;
            color: #003a6b;
            font-weight: 700;
        }

        .footer-info {
            font-size: 0.95rem;
            font-weight: 600;
            color: #003a6b;
            text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
            text-align: center;
            line-height: 1.4;
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 2rem 1.5rem;
            }
            .brand h1 {
                font-size: 1.7rem;
            }
            .brand .sub {
                font-size: 1rem;
            }
            .footer-text {
                font-size: 0.9rem;
            }
            .footer-info {
                font-size: 0.85rem;
            }
            .footer {
                padding: 1rem 0.5rem 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="page-wrapper">
        <div class="main-content">
            <div class="login-card">
                <div class="brand">
                    <i class="fas fa-store-alt"></i>
                    <h1>综合计费管理系统</h1>
                    <div class="sub">浦江海乐城商业管理</div>
                </div>

                <form id="loginForm" onsubmit="return false;">
                    <div class="input-group">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" placeholder="用户名" autocomplete="off">
                    </div>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" placeholder="密码">
                    </div>

                    <button type="submit" class="login-btn" id="loginBtn">
                        <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i> 登录
                    </button>
                </form>
            </div>
        </div>

        <!-- 底部：备案号 + 系统名称 + 版权所有（已删除主办单位） -->
        <div class="footer">
            <div class="footer-text">
                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">浙ICP备2022009705号</a>
                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">浙ICP备2022009705号-1</a>
                <span>|</span>
                <span>综合计费管理系统</span>
            </div>
            <div class="footer-info">主办单位：金华市海鲸商业管理有限公司</div>
        </div>
    </div>

    <script>
        (function() {
            const form = document.getElementById('loginForm');

            function handleLogin(event) {
                event.preventDefault();
                const username = document.getElementById('username').value.trim();
                const password = document.getElementById('password').value;
                alert(`用户名和密码错误\n\n用户名：${username || '(未输入)'}\n密码：${password ? '******' : '(未输入)'}\n\n综合计费管理系统`);
            }

            form.addEventListener('submit', handleLogin);
        })();
    </script>

    <!-- 说明：
         1. 背景采用深蓝色（顶部）到浅蓝色（底部）垂直渐变。
         2. 底部已删除“主办单位”一行，仅保留备案号+系统名称和“版权所有”信息。
    -->
</body>
</html>