MD风格

实时预览

源代码

<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中纸片DIY共享平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.19.1/css/mdb.min.css">
    <style>
        body {
            background-color: #f4f5f7;
        }
        .card {
            margin: 0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }
        .announcement {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="announcement">
        <h2 id="title">公告标题</h2>
        <p id="notice">
    </div>

    <div class="card col-md-4 col-sm-6 col-10">
        <div class="card-body">
            <h5 class="card-title text-center">请输入卡密</h5>
            <div class="md-form">
                <input type="text" id="code" class="form-control">
                <label for="card-code">卡密</label>
            </div>
            <button class="btn btn-primary btn-block" onclick="Call_Verify(code.value);" type="submit">激活卡密</button>
            <button id="Pay" type="submit" class="btn btn-secondary btn-block mt-3"onclick="Call_Pay();">购买卡密</button>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/mdbootstrap/4.19.1/js/mdb.min.js"></script>
    <script> 

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("announcement-title").innerHTML = Call_GetTitle();
        document.getElementById("announcement-content").innerHTML = Call_GetMsg();
    });

    function Call_BuyCode() {
        alert('您点击了购买卡密按钮');
    }

</script>
    <script>
        document.getElementById("title").innerHTML = PanGolin.GetTitle();
        document.getElementById("notice").innerHTML = PanGolin.GetNotice();
        document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() ? "试用" : "查码";
        document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "block" : "none";

        function Call_Verify(data) {
            PanGolin.Verify(data);
        }

        function Call_Query_Trial(data) {
            if (PanGolin.Is_Trial()) PanGolin.Trial();
            else PanGolin.Query(data);
        }

        function Call_Pay() {
            PanGolin.Pay();
        }

        function mStart(obj) {
            obj.style.opacity = "0.8";
        }

        function mUp(obj) {
            obj.style.opacity = "1";
        }
    </script></body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
详细描述

实时预览

源代码
