gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱智农 - 智慧农业平台登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <style>
        :root {
            --primary-color: #4CAF50;
            --primary-dark: #388E3C;
            --primary-light: #C8E6C9;
            --accent-color: #8BC34A;
            --text-color: #333;
        }
        
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--text-color);
            background-color: #f5f7f9;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,10 Q50,0 70,10 T90,30 Q100,50 90,70 T70,90 Q50,100 30,90 T10,70 Q0,50 10,30 T30,10" fill="none" stroke="%234CAF5022" stroke-width="2"/></svg>');
            background-size: 300px;
        }
        
        .login-container {
            background-color: white;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .login-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 24px;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .input-group input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-light);
            outline: none;
        }
        
        .input-group label {
            position: absolute;
            left: 16px;
            top: 12px;
            color: #999;
            pointer-events: none;
            transition: all 0.3s;
        }
        
        .input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label {
            transform: translateY(-24px);
            font-size: 12px;
            color: var(--primary-color);
            background-color: white;
            padding: 0 4px;
        }
        
        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .login-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .bg-decoration {
            position: absolute;
            z-index: -1;
        }
        
        .bg-circle-1 {
            width: 300px;
            height: 300px;
            background-color: rgba(76, 175, 80, 0.05);
            border-radius: 50%;
            top: -100px;
            left: -100px;
        }
        
        .bg-circle-2 {
            width: 200px;
            height: 200px;
            background-color: rgba(139, 195, 74, 0.05);
            border-radius: 50%;
            bottom: -50px;
            right: -50px;
        }
        
        .login-image {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,80 C40,70 60,90 80,80 L80,20 C60,10 40,30 20,20 Z" fill="%234CAF5033"/><path d="M30,70 C45,65 55,75 70,70 L70,30 C55,25 45,35 30,30 Z" fill="%234CAF5022"/><circle cx="50" cy="50" r="10" fill="%234CAF5044"/></svg>');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative">
        <div class="bg-decoration bg-circle-1"></div>
        <div class="bg-decoration bg-circle-2"></div>
        
        <div class="login-container max-w-md w-full mx-auto">
            <div class="login-header">
                <h2 class="text-2xl font-bold">爱智农智慧农业平台</h2>
                <p class="mt-2 text-sm opacity-80">科技赋能农业，智慧创造未来</p>
            </div>
            
            <div class="flex">
                <div class="w-full p-6">
                    <h3 class="text-xl font-medium text-center mb-6">账号登录</h3>
                    
                    <form id="loginForm">
                        <div class="input-group">
                            <input type="text" id="username" placeholder=" " value="admin">
                            <label for="username">用户名</label>
                        </div>
                        
                        <div class="input-group">
                            <input type="password" id="password" placeholder=" " value="123456">
                            <label for="password">密码</label>
                        </div>
                        
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center">
                                <input id="remember" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                <label for="remember" class="ml-2 block text-sm text-gray-600">记住我</label>
                            </div>
                            <a href="#" class="text-sm text-green-600 hover:text-green-800">忘记密码?</a>
                        </div>
                        
                        <button type="submit" class="login-btn">登 录</button>
                    </form>
                </div>
            </div>
            
            <div class="px-6 pb-6 text-center">
                <p class="text-sm text-gray-500">© 2023 爱智农智慧农业平台 版权所有</p>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 简单的前端验证
            if (username === 'admin' && password === '123456') {
                // 登录成功，跳转到主页
                window.location.href = 'index.html';
            } else {
                alert('用户名或密码错误，请使用默认账号：admin / 123456');
            }
        });
    </script>
</body>
</html>