2024.12.24 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>

    <link rel="stylesheet" type="text/css" href="/static/login/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/css/util.css">
    <link rel="stylesheet" type="text/css" href="/static/login/css/main.css">
    <style>
        /* 优化背景及字体样式 */
        body {
            font-family: "Arial", sans-serif;
            background-color: #f5f7fa;
        }
        .container-login100 {
            background: linear-gradient(to right, #1E90FF, #87CEFA); /* 背景渐变 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .wrap-login100 {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px; /* 最大宽度 */
        }
        .login100-form-title {
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .wrap-input100 {
            position: relative;
            margin-bottom: 20px;
        }
        /* 图标定位 */
        .wrap-input100 .label-input100 {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #aaa;
        }
        .input100 {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px 15px;
            padding-left: 35px; /* 留出图标空间 */
            font-size: 16px;
            color: #333;
            width: 100%;
        }
        .input100:focus {
            border-color: #1E90FF;
            outline: none;
            box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
        }
        .wrap-login100-form-btn {
            background: #1E90FF;
            border-radius: 5px;
            overflow: hidden;
        }
        .login100-form-btn {
            background: #1E90FF;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border: none;
            width: 100%;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .login100-form-btn:hover {
            background: #4682B4;
        }
        .text-right a {
            color: #1E90FF;
            text-decoration: none;
            font-size: 14px;
        }
        .text-right a:hover {
            text-decoration: underline;
        }
        .txt1 {
            font-size: 14px;
            color: #333;
        }
        .txt1 span {
            font-weight: bold;
        }
    </style>
</head>

<body>

<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form class="login100-form validate-form" action="/login" method="post">
                <span class="login100-form-title p-b-49">用户登录</span>

                <div class="wrap-input100 validate-input" data-validate="请输入用户名">
                    <span class="label-input100"><i class="fa fa-user"></i></span> <!-- 用户图标 -->
                    <input class="input100" type="text" name="id" placeholder="请输入用户名" autocomplete="off">
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100"><i class="fa fa-lock"></i></span> <!-- 锁图标 -->
                    <input class="input100" type="password" name="password" placeholder="请输入密码">
                </div>

                <div class="text-right p-t-8 p-b-31">
                    <a href="/index/register.html">立即注册</a>
                </div>

                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <button class="login100-form-btn">登 录</button>
                    </div>
                </div>

                <div class="txt1 text-center p-t-10">
                    #if(errorMsg)
                    <span style="color: red">#(errorMsg)</span>
                    #end
                </div>

            </form>
        </div>
    </div>
</div>

<script src="/static/login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/static/login/js/main.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户注册</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link rel="stylesheet" type="text/css" href="/static/login/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="/static/login/css/util.css">
    <link rel="stylesheet" type="text/css" href="/static/login/css/main.css">

    <style>
        /* 页面背景设置 */
        body {
            font-family: "Arial", sans-serif;
            background: linear-gradient(to right, #1E90FF, #87CEFA); /* 渐变背景 */
            margin: 0;
            height: 100vh;
        }

        .limiter {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 确保内容居中 */
        }

        .container-login100 {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            padding: 50px;
            max-width: 400px;
            width: 100%;
        }

        .login100-form-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }

        .wrap-input100 {
            position: relative;
            margin-bottom: 20px;
        }

        .wrap-input100 .label-input100 {
            position: absolute;
            top: 10px;
            left: 15px;
            font-size: 14px;
            color: #777;
        }

        .input100 {
            width: 100%;
            padding: 15px;
            padding-left: 40px; /* 留出图标空间 */
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s ease;
        }

        .input100:focus {
            outline: none;
            border-color: #1E90FF;
            box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
        }

        .input100::placeholder {
            color: #bbb;
        }

        .focus-input100 {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            font-size: 18px;
            color: #1E90FF;
        }

        .container-login100-form-btn {
            width: 100%;
            margin-top: 20px;
        }

        .login100-form-btn {
            background-color: #1E90FF;
            color: white;
            font-size: 18px;
            font-weight: bold;
            padding: 15px;
            border: none;
            border-radius: 5px;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .login100-form-btn:hover {
            background-color: #4682B4;
        }

        .error-msg {
            color: red;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            display: none;
        }

        .text-right a {
            font-size: 14px;
            color: #1E90FF;
            text-decoration: none;
        }

        .text-right a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>

<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form class="login100-form validate-form" action="/register" method="post">
                <span class="login100-form-title p-b-49">用户注册</span>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100"><i class="fa fa-user"></i></span> <!-- 用户图标 -->
                    <input class="input100" type="text" name="id" placeholder="请输入用户名" autocomplete="off">
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100"><i class="fa fa-lock"></i></span> <!-- 锁图标 -->
                    <input class="input100" type="password" name="password" id="password" placeholder="请输入密码">
                </div>
                <br>
                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100"><i class="fa fa-lock"></i></span> <!-- 锁图标 -->
                    <input class="input100" type="password" name="password1" id="password1" placeholder="请再次输入密码" onblur="validatePassword()">
                </div>
                <br>

                <div class="container-login100-form-btn">
                    <button class="login100-form-btn">注册</button>
                </div>

            </form>

            <div class="error-msg" id="errorMsg"></div> <!-- 错误信息显示 -->
        </div>
    </div>
</div>

<script src="/static/login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/static/login/js/main.js"></script>
<script>
    // 验证两次密码是否一致
    function validatePassword() {
        var password = document.getElementById("password").value;
        var password1 = document.getElementById("password1").value;

        if (password !== password1) {
            document.getElementById("errorMsg").innerHTML = "密码不一致，请重新输入。";
            document.getElementById("errorMsg").style.display = "block"; // 显示错误信息
        } else {
            document.getElementById("errorMsg").style.display = "none"; // 隐藏错误信息
        }
    }
</script>

</body>
</html>
#@layout()
#define main()
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>图片业务管理 ---&gt; 图片转换</legend>
</fieldset>
<head>
    <link rel="stylesheet" href="../static/selfDefine.css">
</head>
<body>
<div class="container_self">
    <img id="image1" src="#(imageSrc1)" alt="请选择图片">
    <img id="image2" src="#(imageSrc2)" alt="转换后的图片">
</div>

<div class="container_self" style="margin-top: 30px;">
    <form id="conversionForm" action="/picture/convert" method="post">
        <!--图片特效-->
        <input class="rButton" type="radio" name="effectType" id="effectType1" value="url1" checked="checked"
               onclick="toggleDropdown('url1', 'url2')" style="width: 18px;height: 18px;">
        <label for="effectType1" style="font-size: 18px;">图片特效</label>

        <select name="url1" id="url1" style="width:120px ;height: 38px;padding: 0 2px 0 2px; ">
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime">
                人物动漫化
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/colourize">
                黑白图像上色
            </option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <!--图片增强-->
        <input class="rButton" type="radio" name="effectType" id="effectType2" value="url2"
               onclick="toggleDropdown('url2', 'url1')">
        <label for="effectType2" style="font-size: 18px;">图片增强</label>

        <select name="url2" id="url2" style="width:140px;height: 38px;padding: 0 2px 0 2px; " disabled>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/dehaze">
                图像去雾
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/stretch_restore">
                拉伸图像修复
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/image_definition_enhance">
                图像清晰度增强
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/remove_moire">
                图像去摩尔纹
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/doc_repair">
                文档图片去底纹
            </option>
            <option value="https://aip.baidubce.com/rest/2.0/image-process/v1/denoise">
                图像去噪
            </option>
        </select>
        <br>
        <br>
        <!-- 图片选择-->
        <input type="file" id="fileInput" accept="image/*" style="width: 200px;">
        <!-- 提交按钮-->
        <input type="submit" value="图片转换">
        <input type="button" value="保存图片" onclick="downloadImg()" style="margin-left: 50px">
        <br>
        <!-- 存放图片的src-->
        <input type="hidden" id="imageSrc" name="imageSrc" value="">
    </form>
</div>

</body>

<script>
    // 获取元素
    const fileInput = document.getElementById('fileInput');
    const image1 = document.getElementById('image1');
    const image2 = document.getElementById('image2');
    const imageSrcInput = document.getElementById('imageSrc');
    // 监听文件选择变化
    fileInput.addEventListener('change', function (event)
    {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function (readerEvent)
        {
            image1.src = readerEvent.target.result;

            imageSrcInput.value = readerEvent.target.result;
        };

        if (file)
        {
            reader.readAsDataURL(file);
        }
    });

    //使所选按钮对应的下拉框可选，未选的只读
    function toggleDropdown(selectedBox, readOnlyBox) {
        const selectedBoxElement = document.getElementById(selectedBox);
        const readOnlyBoxElement = document.getElementById(readOnlyBox);
        readOnlyBoxElement.disabled = true;
        selectedBoxElement.disabled = false;
    }

    //图片保存
    function downloadImg() {

        //创建一个虚拟链接
        const a = document.createElement('a');
        a.href = image2.src;
        a.download = 'converted_image.jpg';

        //点击触发下载
        a.click();
    }
</script>
#end
#@layout()
#define main()

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; text-align: center; font-size: 24px; font-weight: bold;">
    <legend>图片转换查询</legend>
</fieldset>

<head>
    <link rel="stylesheet" href="../static/selfDefine.css">
    <script>
        function toggleDropdown(selectedBox, readOnlyBox) {
            const selectedBoxElement = document.getElementById(selectedBox);
            const readOnlyBoxElement = document.getElementById(readOnlyBox);
            selectedBoxElement.disabled = false;

            readOnlyBoxElement.disabled = true;

            readOnlyBoxElement.value = "";
        }
    </script>
</head>

<div style="max-width: 1200px; margin: 0 auto; padding: 20px;">

    <!-- 表单部分 -->
    <div class="form_box" style="margin-bottom: 30px;">
        <form action="/picture/search" method="post" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
            <!-- 图片特效 -->
            <div style="flex: 1 1 30%; padding-right: 20px; margin-bottom: 20px;">
                <label for="effectType1" style="font-size: 20px; font-weight: bold;">转换效果</label>
                <div>
                    <input class="rButton" type="radio" name="effectType" id="effectType1" value="人物动漫化"
                           style="width: 18px;height: 18px;">
                    <label for="effectType1" style="font-size: 18px;">人物动漫化</label>

                    <input class="rButton" type="radio" name="effectType" id="effectType2" value="图像清晰度增强"
                           style="width: 18px;height: 18px;">
                    <label for="effectType2" style="font-size: 18px;">图像清晰度增强</label>
                </div>
            </div>

            <!-- 日期选择 -->
            <div style="flex: 1 1 30%; padding-right: 20px; margin-bottom: 20px;">
                <label for="date" style="font-size: 20px; font-weight: bold;">日期</label>
                <input type="date" name="date" value="#(date)" style="width: 150px; height: 30px; font-size: 14px;">

            </div>

        </form>

        <!-- 查询按钮放在查询条件下方 -->
        <div style="display: flex; justify-content: center; margin-top: 20px;">
            <input class="layui-btn" type="submit" value="查询" style="width: 200px; height: 38px; font-size: 16px; font-weight: bold;">
        </div>
    </div>

    <!-- 表格部分 -->
    <div class="layui-form">
        <table class="layui-table">
            <thead>
            <tr>
                <th width="60px">用户名</th>
                <th width="150px">时间</th>
                <th width="150px">转换效果</th>
                <th width="120px">操作</th>
            </tr>
            </thead>
            <tbody>
            #for(x : pRecord)
            <tr>
                <td>#(x.id)</td>
                <td class="overflow">#(x.time)</td>
                <td>#(x.type)</td>
                <td style="text-align: center">
                    <div class="layui-table-cell laytable-cell-1-action">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" href="/picture/detail/#(x.time)">
                            <i class="layui-icon layui-icon-edit"></i>查看详情
                        </a>
                    </div>
                </td>
            </tr>
            #end
            </tbody>
        </table>
    </div>

</div>

#end
posted @   我也不想的  阅读(3)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  2024.12.26
·  2024.12.25
·  layui 实现登录
·  软件开发与创新课程设计-第一周课后作业-软件二次开发
·  1_Layui
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae