视频DIY模板

实时预览

源代码

<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"="IE=edge">
    <meta name="viewport"="width=device-width, initial-scale=1.0">
    <title>module five</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: bold;
        }

        button {
            outline: none;
            background-color: transparent;
            border: none;
        }

        /* 页面容器样式 */
     .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100vh;
            padding: 0 35px;
        }

        /* 视频背景样式 */
        video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
        }

        /* 主要内容区域盒子样式 */
     .box {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 10%;
        }

       .box > img {
            width: 70px;
            height: 70px;
            border-radius: 50px;
        }

       .box > h1 {
            font-size: 13px;
        }

       .box > span {
            font-size: 18px;
        }

        /* 输入框和按钮通用样式 */
     .code > input,
     .code > button {
            width: 100%;
            height: 50px;
            text-align: center;
            outline: none;
            border-radius: 10px;
            border: 2px solid #000000;
        }

     .code > button {
            margin-top: 15px;
            color: #ffffff;
            background-color: #5729ed;
            border: none;
        }

        /* 查码等按钮所在区域样式 */
     .code-other {
            position: relative;
            width: 100%;
            height: 30px;
            margin-top: 20px;
        }

     .code-other > button:first-child {
            position: absolute;
            top: 0;
            left: -10px;
        }

     .code-other > button:last-child {
            position: absolute;
            top: 0;
            right: -10px;
        }

        /* 底部区域样式 */
     .floor {
            width: 100%;
            height: 100vh;
            position: relative;
        }

       .floor img {
            display: block;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

       .floor button {
            display: block;
            width: 100%;
            height: 50px;
            position: absolute;
            left: 50%;
            bottom: 25%;
            transform: translateX(-50%);
            border: 2px solid #8cbcf2;
            border-radius: 10px;
            margin: 0 auto;
        }

       .floor span {
            display: block;
            width: 100%;
            height: 20px;
            position: absolute;
            left: 50%;
            bottom: 10%;
            transform: translateX(-50%);
            text-align: center;
        }

    </style>
</head>

<body>
    <video autoplay muted loop>
        <source src="https://kvideo01.youju.sohu.com/4079343a-b42f-4d16-b87f-0073404f30ae2_0_0.mp4?sign=af36fb09297037be028382ede4815d8c&t=1734784883&vid=165203615&uid=1734783983735710&plat=17&SOHUSVP=k5sA8DTo1ryfu8Mz2nzX20J_cgc4kbyG5rxsJ6HHWVs&pt=5&prod=h5&ps=H5&pg=1&eye=0&cv=1.0.0&qd=680&src=11230001&ca=4&cateCode=337&_c=1&appid=tv&vp=1&vt=UGC&uf=265&oth=&cd= " type="video/mp4">
       //视频链接在上方改
    </video>
    <div class="container">
        <div class="box">
            <a href="https://zhongzhipian.top">
                <img border="0" src="https://zhongzhipian.top/assets/img/logo.png" alt="『中纸片』" width="100" height="100"></a>
            <h1 id="title">title</h1>
            <span id="notice">notice</span>
            <div class="code">
                <input type="text" name="code" id="code" pattern="^[a-zA-Z0-9_-]{1,16}$" placeholder="请输入你的激活码">
                <button type="submit" onclick="Call_Verify(code.value);" ontouchstart="mStart(this)" ontouchend="mUp(this)">激活</button>
            </div>
            <div class="code-other">
                <button id="Query_Trial" type="submit" class="code-ver" onclick="Call_Query_Trial(code.value);">查询卡密</button>
                <button id="Pay" type="submit" class="code-buy" onclick="Call_Pay();">购买卡密</button>
            </div>
        </div>
        <div class="floor">
            <button>『中纸片』提供服务</button>
            <span>『中纸片』让我们服务与您</span>
        </div>
    </div>
    <script>
        document.getElementById("title").innerHTML = PanGolin.GetTitle();
        document.getElementById("notice").innerHTML = PanGolin.GetNotice();
        document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() == true? "试用" : "查码";
        document.getElementById("Pay").style.display = PanGolin.Is_Pay() == true? "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.backgroundColor = "#fff";
            obj.style.color = "#000000"
        }
        function mUp(obj) {
            obj.style.backgroundColor = "#5729ed";
            obj.style.color = "#ffffff"
        }
        let Height = document.body.offsetHeight;
        window.onresize = function () {
            document.body.offsetHeight = Height + 'px';
            document.querySelector('.container').style.offsetHeight = Height + 'px'
        }
    </script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
详细描述

实时预览

源代码
