master

分支 (1)

标签 (6)

管理

管理

master

v1.4.2

v1.4.1

v1.4.0

v1.3.0

v1.2.0

v1.1.0

phpmyadmin-timestamp-field-format
/
options.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title data-i18n="page_title">设置</title>
    <style>
        body {
            color: #323336;
            font-size: 16px;
            line-height: 150%;
            padding: 0 1.5em 1.5em;
        }

        .item {
            margin: 0.7em 0;
            display: flex;
            align-items: flex-start;
        }

        .label {
            text-align: right;
            margin-right: 1em;
            font-weight: bold;
            display: inline-block;
            width: 85px;
        }

        .en .label {
            width: 120px;
        }

        .options {
            display: inline-block;
        }

        .checkbox {
            position: relative;
            -webkit-appearance: none;
            width: 45px;
            height: 24px;
            line-height: 24px;
            border-radius: 20px;
            outline: none;
            margin: 0;
            background: #d2d2d2;
            vertical-align: sub;
        }

        .checkbox:before {
            position: absolute;
            top: 2px;
            left: 2px;
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            transition: all 0.2s linear;
        }

        .checkbox:checked {
            background: #1E9FFF;
            border-color: #1E9FFF;
        }

        .checkbox:checked::before {
            left: 23px;
        }

        .textarea {
            width: 220px;
            height: 120px;
            font-size: 14px;
            outline: 0;
        }

        .radio-label {
            line-height: 180%;
            display: block;
        }

        .radio {
            position: relative;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            outline: none;
            border: 2px solid #d2d2d2;
            margin: 0;
            vertical-align: sub;
        }

        .radio:before {
            position: absolute;
            top: 4px;
            left: 4px;
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transition: all 0.2s linear;
            background: #fff;
        }

        .radio:checked {
            border-color: #1E9FFF;
        }

        .radio:checked::before {
            background: #1E9FFF;
        }

        .button {
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background: #1E9FFF;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 16px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            outline: 0;
        }

        .button:hover {
            opacity: .8;
        }

        .tips {
            display: none;
            color: #5FB878;
            font-size: 14px;
            margin-left: 15px;
        }
    </style>
    <script type="text/javascript" src="options.js"></script>
</head>

<body>
    <div class="item">
        <label class="label" data-i18n="auto_format">自动转换：</label>
        <div class="options">
            <input type="checkbox" class="checkbox" id="auto_transform">
        </div>
    </div>
    <div class="item">
        <label class="label" data-i18n="manual_format">手动转换：</label>
        <div class="options" data-i18n="manual_format_key">
            Ctrl + 鼠标左键
        </div>
    </div>
    <div class="item">
        <label class="label" data-i18n="close_format">关闭转换：</label>
        <div class="options" data-i18n="close_format_key">
            Alt + 鼠标左键
        </div>
    </div>
    <div class="item">
        <label class="label" data-i18n="special_field">特殊字段：</label>
        <div class="options">
            <textarea class="textarea" id="special_list" data-i18n-placeholder="special_field_placeholder" placeholder="输入字段名，一行一个，支持通配符"></textarea>
        </div>
    </div>
    <div class="item">
        <label class="label" data-i18n="special_rule">字段规则：</label>
        <div class="options">
            <label class="radio-label">
                <input type="radio" class="radio" name="special_rule" value="0">
                <span data-i18n="special_rule_0">不转换以上字段</span>
            </label>
            <label class="radio-label">
                <input type="radio" class="radio" name="special_rule" value="1">
                <span data-i18n="special_rule_1">只转换以上字段</span>
            </label>
        </div>
    </div>
    <div class="item">
        <label class="label"></label>
        <div class="options">
            <button type="button" class="button" id="save_setting" data-i18n="save_btn">保存设置</button>
            <div class="tips" data-i18n="save_tips">保存成功！</div>
        </div>
    </div>
</body>

</html>