<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<style>
    body {
        padding: 0 20%;
    }

    h4 {
        margin: 8px 0;
    }

    .content {
        width: 100%;
        min-height: 400px;
        padding: 4px 8px;
        font-size: 14px;
    }

    .bor {
        box-sizing: border-box;
        outline: none;
        border: 1px solid #eee;
    }

    .bor:focus,
    .bor:hover {
        border: 1px solid #a5d7ff;
    }

    .ipt-text {
        padding: 4px;
        width: 100%;
        font-size: 14px;
    }

    .sub-btn {
        margin-left: calc(100% - 80px);
        width: 80px;
        margin-top: 8px;
    }
</style>

<body>
    <h3 style="margin:0;">题库内容:</h3>
    <span style="font-size:10px;font-weight:400;">(这并不是一个完善的功能)</span>
    <textarea id="content" class="content bor"></textarea>
    <br>
    <input id="regx" class="ipt-text bor" type="text" value="" placeholder="正则表达式,题目用 {topic} 代替 答案用{answer} 代替">
    <button id="submit" class="sub-btn">确定</button>
    <h4>匹配测试</h4>
    <input id="topic" class="ipt-text bor" type="text" value="" placeholder="题目标题">
    <button id="test" class="sub-btn">测试</button>
    <div id="result" style="width: 100%;">结果</div>
</body>

</html>