privacy-protection/PP-binding/frontend/web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平台绑定统计</title>
    <link rel="stylesheet" href="./style/index.css">
    <script src="./script/index.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
<div class="title-container" id="title-container">
    <h1 class="title">平台绑定统计</h1>
</div>

<div class="main-container">
    <div class="tools-container" id="tools-container">
        <button class="add-item-button" id="add-item-button">添加</button>
        <input placeholder="输入关键字查询"/>
        <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
    </div>
    <div class="table-container">
        <div class="table-header">
            <div>基础工具类型</div>
            <div>基础工具ID</div>
            <div>绑定到</div>
            <div>危险等级</div>
            <div>用户名</div>
            <div>密码</div>
            <div>备注</div>
            <div>绑定的其他平台</div>
            <div>操作</div>
        </div>

        <div class="table-outer-scrollable-container" id="table-outer-scrollable-container">
            <div class="table-items-container" title="首次创建时间: 2026年01月01日&#10;最后修改时间: 2026年12月10日">
                <div>{{手机号}}</div>
                <div>{{12345678900}}</div>
                <div>{{滴滴打车}}</div>
                <div>{{安全}}</div>
                <div>{{小爱同学}}</div>
                <div>{{123456}}</div>
                <div>{{暂无}}</div>
                <div class="more-platform-container">
                    <div>{{邮箱}},&nbsp;</div>
                    <div>{{微信}},&nbsp;</div>
                    <div>{{qq}},&nbsp;</div>
                    <div>{{微博}}</div>
                </div>
                <div>
                    <button class="change-item-button">修改</button>
                    <div class="white-space"></div>
                    <button class="delete-item-button">删除</button>
                </div>
            </div>
            <div class="table-items-container">
                <div>{{手机号}}</div>
                <div>{{12345678900}}</div>
                <div>{{滴滴打车}}</div>
                <div>{{安全}}</div>
                <div>{{小爱同学}}</div>
                <div>{{123456}}</div>
                <div class="more-platform-container">{{暂无暂无暂无暂无暂无暂无暂无}}</div>
                <div class="more-platform-container">
                    <div>{{邮箱}},&nbsp;</div>
                    <div>{{微信}},&nbsp;</div>
                    <div>{{qq}},&nbsp;</div>
                    <div>{{微博}}</div>
                </div>
                <div>
                    <button class="change-item-button">修改</button>
                    <div class="white-space"></div>
                    <button class="delete-item-button">删除</button>
                </div>
            </div>
        </div>
    </div>
</div>

<dialog class="add-item-dialog" id="add-item-dialog">
    <!--    title bar -->
    <div class="title-bar-container">
        <div class="close-button" id="add-item-dialog-close-button"></div>
        <div class="title">添加一条数据</div>
    </div>

    <div class="main-container">
        <label>
            <div class="label">基础工具类型:</div>
            <select name="basic-tool-type" class="form">
                <option value="PHONE_NUMBER">手机号</option>
                <option value="EMAIL">邮箱</option>
                <!--TODO: 如果是软件平台，那么底下的“基础工具ID”需要分为两个输入，一个是软件名，一个是该软件的ID
                            且下面的用户名和密码新增"跟随基础工具"的-->
                <option value="APPLICATION">软件平台</option>
                <option value="">无</option>
            </select>
        </label>

        <label>
            <div class="label">基础工具ID:</div>
            <input class="form" type="text" placeholder="请输入ID/软件名">
        </label>
        <label>
            <div class="label">绑定到:</div>
            <input class="form" type="text" placeholder="请输入目标平台名称">
        </label>
        <label>
            <div class="label">危险等级:</div>
            <select name="danger-level" class="form">
                <option value="0">安全</option>
                <option value="1">中等</option>
                <option value="2">危险</option>
            </select>
        </label>
        <label>
            <div class="label">用户名:</div>
            <input class="form" type="text">
        </label>
        <label>
            <div class="label"> 密码:</div>
            <input class="form" id="password-field" type="text">
        </label>
        <label>
            <div class="label">备注:</div>
            <textarea class="form" maxlength="100"></textarea>
        </label>
        <label>
            <div class="label">其他平台:</div>
            <input class="form" type="text" placeholder="请输入ID/软件名">
        </label>
        <button id="submit-item-button">提交</button>
    </div>
</dialog>
</body>
</html>