☰

高级感仿MOS风格标签页界面

在新标签页中展示高级感的仿MOS风格界面，注重简洁与用户体验

当前为 2024-10-11 提交的版本，查看 最新版本。

// ==UserScript==
// @name         高级感仿MOS风格标签页界面
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在新标签页中展示高级感的仿MOS风格界面，注重简洁与用户体验
// @author       你的名字
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 自定义的MOS风格HTML界面
    const customPageHTML = `
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>高级感界面</title>
        <style>
            body {
                font-family: 'Helvetica Neue', 'Arial', sans-serif;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background: linear-gradient(135deg, #f0f0f0, #e6e6e6);
            }
            .container {
                padding: 40px;
                background-color: white;
                border-radius: 20px;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                text-align: center;
                max-width: 400px;
                width: 100%;
                transition: all 0.3s ease;
            }
            .container:hover {
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            }
            h1 {
                font-size: 28px;
                color: #333;
                margin-bottom: 25px;
                font-weight: 500;
            }
            input {
                border: none;
                border-bottom: 2px solid #ccc;
                padding: 12px;
                width: 100%;
                margin-bottom: 20px;
                font-size: 18px;
                background-color: #f9f9f9;
                border-radius: 10px;
                outline: none;
                transition: border-color 0.3s ease;
            }
            input:focus {
                border-color: #007BFF;
                background-color: #fff;
            }
            button {
                padding: 14px 0;
                background-color: #007BFF;
                border: none;
                color: white;
                font-size: 18px;
                border-radius: 12px;
                cursor: pointer;
                width: 100%;
                transition: background-color 0.3s ease, transform 0.2s;
            }
            button:hover {
                background-color: #0056b3;
                transform: translateY(-2px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>高级感界面</h1>
            <input type="text" id="inputText" placeholder="输入您的内容">
            <button id="submitButton">提交</button>
        </div>

        <script>
            document.getElementById('submitButton').addEventListener('click', function() {
                const userInput = document.getElementById('inputText').value;
                if(userInput.trim() === "") {
                    alert("请输入内容");
                } else {
                    alert('您输入的内容是: ' + userInput);
                }
            });
        </script>
    </body>
    </html>
    `;

    // 打开一个新标签页并写入自定义HTML
    let newTab = window.open('about:blank', '_blank');
    newTab.document.write(customPageHTML);
    newTab.document.close();
})();