<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/css/common.css">
    <title>在线留言 - 乐事地坪漆</title>
    <style>
        /* 红色 * 号样式 */
        .required {
            color: red;
            margin-right: 4px;
        }
    </style>
</head>
<body>

<div class="success" id="successBox">✅ 留言提交成功！</div>

<div class="nav">
    <div class="nav-logo"><img src="/images/logo.png" alt="乐事地坪漆"></div>
    <div class="nav-menu">
        <a href="/">首页</a>
        <a href="/case">工程案例</a>
        <a href="/product">产品中心</a>
        <a href="/message" class="active">在线留言</a>
        <a href="/contact">联系我们</a>
        <a href="/about">关于我们</a>
    </div>
</div>

<div class="container" style="display: flex; justify-content: center;">
    <div class="form-box">
        <h1>在线留言</h1>
        <div class="alert-error">系统异常，请稍后再试</div>
        <form method="post" action="/message/submit" onsubmit="return check()">
            <input type="hidden" name="" value="">
            <div class="form-item">
                <label><span class="required">*</span>您的姓名</label>
                <input type="text" name="name" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-item">
                <label>手机号码（手机号或邮箱至少填一项）</label>
                <input type="text" name="phone" id="phone" placeholder="请输入手机号">
            </div>
            <div class="form-item">
                <label>邮箱（手机号或邮箱至少填一项）</label>
                <input type="text" name="email" id="email" placeholder="请输入邮箱">
            </div>
            <div class="form-item">
                <label><span class="required">*</span>留言内容</label>
                <textarea name="content" id="content" placeholder="请输入留言内容"></textarea>
            </div>
            <button type="submit">提交留言</button>
        </form>
    </div>
</div>

<div class="footer">
    <p>电话：18086443386 &nbsp;&nbsp; 地址：成都市新都区新都蜀龙大道中段1333号1栋1单元13层1308号 &nbsp;&nbsp; 邮箱：787828467@qq.com</p>
    <p style="margin-top:8px;">© 2026 乐事地坪漆 版权所有</p>
</div>

<script>
    function check(){
        let name = document.getElementById("name").value.trim();
        let phone = document.getElementById("phone").value.trim();
        let email = document.getElementById("email").value.trim();
        let content = document.getElementById("content").value.trim();

        if(!name){
            alert("请输入姓名");
            return false;
        }
        if(!phone && !email){
            alert("手机号或邮箱请至少填写一项");
            return false;
        }
        if(phone && !/^1[3-9]\d{9}$/.test(phone)){
            alert("请输入正确的手机号");
            return false;
        }
        let emailReg = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
        if(email && !emailReg.test(email)){
            alert("请输入正确的邮箱格式");
            return false;
        }
        if(!content){
            alert("请输入留言内容");
            return false;
        }

        sessionStorage.setItem("submitted","true");
        return true;
    }

    window.onload=function(){
        let success = new URLSearchParams(location.search).get("success");
        if(success=="1" && sessionStorage.getItem("submitted")){
            document.getElementById("successBox").style.display="block";
            setTimeout(()=>successBox.style.display="none",3000);
            sessionStorage.removeItem("submitted");
        }
    }
</script>
</body>
</html>