简单昼夜

2250898553 2025-05-01 5 次下载
详细描述
实时预览
源代码
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中纸片DIY共享平台</title>
    <style>
        :root {
            --bg-color: #fff1f0;
            --card-bg: white;
            --text-color: #333;
            --shadow-color: rgba(0,0,0,0.1);
            --button-blue: linear-gradient(135deg, #4facfe, #00f2fe);
            --button-purple: linear-gradient(135deg, #4facfe, #7352ff);
            --button-pink: linear-gradient(135deg, #ff4d79, #ff0072);
            --button-blue-dark: linear-gradient(135deg, #1a73e8, #0d47a1);
            --button-purple-dark: linear-gradient(135deg, #673ab7, #3f51b5);
        }
        .dark-theme {
            --bg-color: #121212;
            --card-bg: #1e1e1e;
            --text-color: #f0f0f0;
            --shadow-color: rgba(0,0,0,0.3);
            --button-blue: linear-gradient(135deg, #4facfe, #00f2fe);
            --button-purple: linear-gradient(135deg, #673ab7, #3f51b5);
            --button-pink: linear-gradient(135deg, #ff4d79, #ff0072);
            --button-blue-dark: linear-gradient(135deg, #64b5f6, #1976d2);
            --button-purple-dark: linear-gradient(135deg, #7b1fa2, #4a148c);
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, var(--bg-color), #fff8f5);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; 
            min-height: 100vh; 
            color: var(--text-color);
            transition: background 0.3s ease, color 0.3s ease;
        }
        .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
            cursor: pointer;
        }
        
        .theme-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: white;
            box-shadow: 0 2px 10px var(--shadow-color);
            transition: all 0.3s ease;
        }
        
        .dark-theme .theme-icon {
            background: #333;
            color: white;
        }
        .card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 30px 25px;
            width: 350px;
            box-shadow: 0 8px 20px var(--shadow-color);
            border: none;
            text-align: center;
            transition: all 0.3s ease;
        }
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 25px;
            overflow: hidden;
            border: 3px solid #f0f0f0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .dark-theme .avatar {
            border-color: #444;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .input-group {
            margin-bottom: 20px;
            width: 100%;
        }
        
        .input-field {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
            box-sizing: border-box;
            background: var(--card-bg);
            color: var(--text-color);
            transition: all 0.3s ease;
        }
        
        .dark-theme .input-field {
            background: #333;
            border-color: #555;
            color: #ddd;
        }
        
        .input-field:focus {
            border-color: #4facfe;
            outline: none;
            box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.2);
        }
        
        .button {
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            color: white;
            transition: all 0.3s ease;
            margin: 5px 0;
            width: 100%;
            background: var(--button-blue);
        }

        .purple {
            background: var(--button-purple);
        }
        
        .pink {
            background: var(--button-pink);
        }
        
        .blue-dark {
            background: var(--button-blue-dark);
        }
        
        .purple-dark {
            background: var(--button-purple-dark);
        }
        
        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .button:active {
            transform: translateY(0);
            box-shadow: none;
        }
        
        .button-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .button-container .button {
            width: auto;
            padding: 10px 20px;
            font-size: 14px;
        }
        
        .notice {
            color: #ff6b6b;
            font-size: 14px;
            margin-bottom: 15px;
            min-height: 20px;
        }
    </style>
</head>
<body>
    <div class="theme-toggle" onclick="toggleTheme()">
        <div class="theme-icon">
            <svg id="themeIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
        </div>
    </div>

    <div class="card">
        <div class="avatar">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23333'/%3E%3Cpath d='M30,50 Q50,30 70,50' stroke='white' stroke-width='3' fill='none'/%3E%3Ccircle cx='50' cy='35' r='8' fill='white'/%3E%3Ccircle cx='38' cy='45' r='2.5' fill='%23e74c3c'/%3E%3Ccircle cx='62' cy='45' r='2.5' fill='%23e74c3c'/%3E%3C/svg%3E" alt="头像">
        </div>
        
        <div class="notice" id="notice"></div>
        
        <div class="input-group">
            <input type="text" name="code" id="code" pattern="^[a-zA-Z0-9_-]{1,16}$" placeholder="请输入你的激活码" class="input-field">
        </div>
        
        <button class="button blue" onclick="Call_Verify(code.value);">登录</button>
        
        <div class="button-container">
            <button class="button blue" id="Pay" onclick="Call_Pay();">购买卡密</button>
        </div>
    </div>
    
    <script>
        function toggleTheme() {
            document.body.classList.toggle('dark-theme');
            const themeIcon = document.getElementById('themeIcon');
            
            if (document.body.classList.contains('dark-theme')) {
                themeIcon.innerHTML = `
                    <circle cx="12" cy="12" r="5"></circle>
                    <line x1="12" y1="1" x2="12" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="23"></line>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                    <line x1="1" y1="12" x2="3" y2="12"></line>
                    <line x1="21" y1="12" x2="23" y2="12"></line>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                `;
            } else {
                themeIcon.innerHTML = `
                    <circle cx="12" cy="12" r="5"></circle>
                    <line x1="12" y1="2" x2="12" y2="4"></line>
                    <line x1="12" y1="20" x2="12" y2="22"></line>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                    <line x1="1" y1="11" x2="3" y2="13"></line>
                    <line x1="21" y1="11" x2="23" y2="13"></line>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                `;
            }
        }

      function mStart(n) {
        n.style.backgroundColor = "#075aa3"
      }
      function mUp(n) {
        n.style.backgroundColor = "#fff"
      }
        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 -->