视频DIY

实时预览

源代码

<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
  body, html {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   color: #fff; 
   text-align: center;
  }

  .background-video {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; 
   z-index: -100;
  }

  .login-container {
   position: absolute;
   top: 50%; 
   left: 50%;
   transform: translate(-50%, -50%) translateY(-1cm); 
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
  }

  .login-container h2,
  .login-container p {
   margin: 10px 0;
   color: #fff; 
  }

  .login-container input[type="text"] {
   width: 90%;
   padding: 10px;
   margin: 10px 0;
   border: 2px solid #007bff; 
   background: rgba(0, 0, 0, 0.5);
   color: #fff; 
   box-sizing: border-box;
   border-radius: 10px; 
  }

  .button-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 10px; 
  }

  .button-container button {
   padding: 5px 10px; 
   margin: 0 5px; 
   border: 2px solid #007bff; 
   background: none;
   color: #fff; 
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   display: flex;
   align-items: center;
   font-size: 14px; 
   border-radius: 10px;
  }

  .button-container button img {
   margin-right: 8px;
   width: 16px;
   height: 16px;
  }

  .button-container button:hover,
  .button-container button:focus {
   background-color: rgba(255, 165, 0, 0.5);
   color: #fff; 
   border-color: orange; 
  }

  .icon-container-small {
   display: flex;
   justify-content: center;
   align-items: center;
  }

  .icon-container-small svg {
   width: 24px; 
   height: 24px;
   margin: 0 10px; 
   cursor: pointer;
  }

  .qq-icon {
   fill: #fff; 
  }
 </style>
</head>
<body>
<video autoplay loop class="background-video" preload="auto" muted="false">
 <source src="https://mumuxiang.cn/view.php/704e93f8781c58aa9824b0f9aa980509.mp4" type="video/mp4">//视频链接请放在src="视频"
 Your browser does not support the video tag.
</video>


<div class="login-container">
 <h2 id="title">获取标题</h2>
 <p id="notice">获取公告</p>
 <input type="text" id="code" placeholder="请输入卡密">
 <div class="button-container">
  <button class="login-btn" onclick="Call_Verify(code.value);">
   <svg viewBox="0 0 24 24" fill="currentColor" class="login-icon"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
   登录系统
  </button>
  <button class="unbind-btn" onclick="Call_Query_Trial(code.value);">
   <svg viewBox="0 0 24 24" fill="currentColor" class="unbind-icon"><path d="M12 2C9.243 2 7 4.243 7 7v2H6c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5zm0 2a3 3 0 0 1 3 3v2h-6V7a3 3 0 0 1 3-3zm6 10H6v-3h12v3z"/></svg>
   查询卡密
  </button>
 </div>
 <div class="icon-container-small">
  <svg viewBox="0 0 24 24" fill="currentColor" onclick="Call_Pay()" class="cart-icon">
   <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
  </svg>
 </div>
</div>

<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";
        }

	    
 document.addEventListener('DOMContentLoaded', function() {
    const noticeElement = document.getElementById('notice');
    const titleElement = document.getElementById('title');
    noticeElement.textContent = getNotice();
    titleElement.textContent = getTitle();
    
    const codeElement = document.getElementById('code');
    codeElement.value = getOldCard();

    const videoElement = document.querySelector('.background-video');
    videoElement.play();
 });

</script>
</body>
</html>

<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
详细描述

实时预览

源代码
