<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>HuiMv OCR Navigator</title>
    <style>
        html, body {
            width: 100%;
            background-color: #eeeeee;
            margin: 0;
            padding: 0;
        }

        h1 {
            padding-left: 50px;
            margin-bottom: 40px;
        }

        .demos {
            width: 100%;
            display: flex;
            justify-content: space-evenly;

            box-sizing: border-box;
            padding: 20px 100px;
        }

        .demo {
            width: 220px;
            height: 260px;
            border: 1px solid #000000;
            background-color: white;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: 4px;
        }

        .demo > img {
            width: 220px;
            height: 150px;
            margin-bottom: 10px;
            border-bottom: 1px solid gray;
            box-sizing: border-box;
            padding: 20px;
        }


    </style>
</head>
<body>
<h1>HuiMv OCR Navigator</h1>
<div class="demos">
    <div rel="/com" class="demo link">
        <img src="/static/html/common.svg" alt="common">
        <span>通用内容识别模型，可识别任意图片中的所有文字内容,对图片要求不高。</span>
    </div>
    <div rel="/idc" class="demo link">
        <img src="/static/html/identity.svg" alt="identity">
        <span>中国大陆身份证内容识别，主要识别：姓名、性别、民族、身份证号、地址、有效日期。</span>
    </div>
    <div class="demo">
        <img src="/static/html/more.svg" alt="more">
        <span>更多内容，有待开发...<br>更多内容，有待开发...<br>更多内容，有待开发...</span>
    </div>
</div>
<script>
    let $links = document.getElementsByClassName("link");
    for (let $link of $links) $link.onclick = function () {
        window.location.href = this.getAttribute("rel");
    }
</script>
</body>
</html>