go+solidity+mysql+html共享经济-校园租借项目登录页面前端2

这个博客展示了使用Gin框架构建的登录页面HTML代码,包括页面布局、样式引用、JavaScript脚本和密码验证功能。页面包含两种登录方式,一种通过账户密码,另一种通过私钥。同时,页面设计包含了响应式布局和一些基本的交互元素。
摘要由CSDN通过智能技术生成

1、登录页面前端(使用gin框架渲染页面,css样式和js就不展示了) ``` {{ define "Static/login.html" }}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="share/static/js/public.js"></script>
<link rel="stylesheet" href="share/css/tabbar.css">
<link href="share/css/krousel.css" rel="stylesheet"/>

<link rel="stylesheet" href="share/static/css/boxicon.min.css">
<link rel="stylesheet" href="share/static/css/login.css">
<link rel="stylesheet" href="share/static/css/responsive.css">

<link rel="stylesheet" href="share/assets/css/style.css">

<!-- App css搜索框 -->
<link href="share/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="share/static/css/icons.min.css" rel="stylesheet" type="text/css">
<link href="share/static/css/app.min.css" rel="stylesheet" type="text/css">
<title>Share Fish-登录</title>
<header>
    <div class="header-wrapper border-bottom">
        <div class="container space-y--15">
            <div class="row align-items-center">
                <div class="col-auto">
                    <!-- header logo -->
                    <div class="header-logo">
                        <a href="../index">
                           <img src="share/assets/img/logo.png" class="img-fluid" alt="" style="width: 75px;">
                        </a>
                    </div>
                </div>
                <div class="col d-flex justify-content-center">
                    <!-- 搜索框 -->
                    <div class="header-search">
                        <a href="../search-page">
                            <div class="input-group">
                                <input type="text" id="chat-search" name="chat-search" class="form-control"
                                    placeholder="搜索好物" style="    padding-left: 30px;">
                        </a>

                        <span style="position: absolute;padding-top: 7px;padding-left: 10px;
                                   "><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <button class="header-menu-trigger" id="header-menu-trigger">
                    <i class="fas fa-align-right" style="font-size: 20px;
                            color: grey;"></i>
                </button>
            </div>
        </div>
    </div>
</header>

{{ template "Static/menu.html" . }}
<div class="loader-content">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="sk-circle">
                <div class="sk-circle1 sk-child"></div>
                <div class="sk-circle2 sk-child"></div>
                <div class="sk-circle3 sk-child"></div>
                <div class="sk-circle4 sk-child"></div>
                <div class="sk-circle5 sk-child"></div>
                <div class="sk-circle6 sk-child"></div>
                <div class="sk-circle7 sk-child"></div>
                <div class="sk-circle8 sk-child"></div>
                <div class="sk-circle9 sk-child"></div>
                <div class="sk-circle10 sk-child"></div>
                <div class="sk-circle11 sk-child"></div>
                <div class="sk-circle12 sk-child"></div>
            </div>
        </div>
    </div>
</div>

<section class="page-title title-bg12">
    <div class="d-table">
        <div class="d-table-cell">
            <h2>登录</h2>
            <ul>
                <li>
                    <a href="../index">首页</a>
                </li>
                <li>登录</li>
            </ul>
        </div>
    </div>
    <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</section>


<div class="container">
    <div class="slider">
        <div class="signin-section ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-8 offset-md-2 offset-lg-3">
                        <form class="signin-form"  action="/loginPost" method="POST" enctype="multipart/form-data">
                            <div class="form-group">
                                <label>账户</label>
                                <input class="form-control" type="file" id="formFileMultiple" name="log_addr" style="font-size: 17px;
                                                                padding-top: 12px;">

                            </div>

                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" placeholder="输入你的密码" id="use_password" name="log_passwd">
                                <p id="p_password"></p>
                            </div>

                            <div class="signin-btn text-center">
                                <button type="submit" id="loginText">登录</button>
                            </div>

                            <hr>


                            <div class="create-btn text-center">
                                <p>没有账号?
                                    <a href="../register">
                                        创建一个账号
                                        <i class='bx bx-chevrons-right bx-fade-right'></i>
                                    </a>
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="signin-section ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-8 offset-md-2 offset-lg-3">
                        <form class="signin-form" action="/priLoginPost" method="post">

                            <div class="form-group">
                                <label>私钥</label>
                                <input type="password" class="form-control" placeholder="请输入你的私钥" required="" name="log_privateKey" id="log_privateKey">
                                </div>

                            <div class="signin-btn text-center">
                                <button type="submit">登录</button>
                            </div>
                            <hr>
                            <div class="create-btn text-center">
                                <p>没有账号?
                                    <a href="../register">
                                        创建一个账号
                                        <i class='bx bx-chevrons-right bx-fade-right'></i>
                                    </a>
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<footer style="padding-bottom: 100px;">

    <div class="sc-bottom-bar">
        <a class="sc-menu-item " href="../index"><i class="fas fa-home"></i></a>
        <a class="sc-menu-item " href="../goods-category"><i class="fas  fa-list"></i></a>
        <a href="../chat" class="sc-menu-item "><i class="fas fa-plus"></i></a>
        <a class="sc-menu-item" href="../select_chat_list"><i class="fas fa-comments"></i></a>
        <a class="sc-menu-item" href="../ui-me"><i class="fas fa-user"></i></a>
    </div>

</footer>

<script src="share/static/js/jquery.min.js"></script>
<script>
    //鼠标移开密码框开始验证
    $("#use_password").blur(function () {
        var password = $("#use_password").val();
        console.log(password)
        var Password=/^(\w){6,20}$/;
        if (!Password.test(password)) {
            $("#p_password").html("<font color="red" size="2">密码格式填写错误!</font>");
        } else {
            $("#p_password").html("<font color="green" size="2">密码格式正确!</font>");
        }
    })

    //鼠标放置密码框不验证
    $("#use_password").focus(function(){
        $("#p_password").html("");
    })
</script>
<script src="share/static/js/owl.carousel.min.js"></script>
<script src="share/static/js/jquery.nice-select.min.js"></script>
<script src="share/static/js/jquery.magnific-popup.min.js"></script>
<script src="share/static/js/jquery.ajaxchimp.min.js"></script>
<script src="share/static/js/form-validator.min.js"></script>
<script src="share/static/js/meanmenu.js"></script>
<script src="share/static/js/custom.js"></script>
<!-- Main JS -->
<script src="share/assets/js/main.js"></script>
<script src="share/js/krousel.umd.js"></script>
<script>
    new Krousel(document.querySelector('.slider'), {

    });
</script>

{{ end }} ``` 2、如图:

68666cb128c1149c6904ce7a26e3bdb.jpg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值