chrome_sync_bookmarks
/
popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/vendor/layui/css/layui.css" rel="stylesheet">
    <script src="static/js/jquery-3.6.0/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="static/js/base64.js" type="text/javascript"></script>
    <script src="static/vendor/layui/layui.js" type="text/javascript"></script>
    <script src="static/js/helps.js" type="text/javascript"></script>
</head>
<style>
    .container {
        width: 600px;
        height: 600px;
        margin: 10px;
        display: flex;
        flex-direction: column;
    }

    .c0 {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        font-weight: bold;
        font-size: 32px;
    }

    .c2 {
        display: flex;
        justify-content: right ;
        padding-bottom: 10px;
    }
    .c3 {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
    }
    .c4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 10px;
    }
    .c5 {
        display: flex;
        justify-content: center;
    }
    .c6{
        padding-top: 20px;
        display: none;
    }

</style>
<body>
<div class="container">
    <div class="c0">
        chrome书签同步
    </div>
    <div class="c1">
        <div class="layui-form-item">
            <label class="layui-form-label">空间地址(owner)</label>
            <div class="layui-input-block">
                <input type="text" name="owner" autocomplete="off" placeholder="请输入仓库所属空间地址"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分支名称(branch)</label>
            <div class="layui-input-block">
                <input type="text" name="branch" autocomplete="off" placeholder="请输入分支名称。默认为仓库对默认分支"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">仓库名称(repo)</label>
            <div class="layui-input-block">
                <input type="text" name="repo" autocomplete="off" placeholder="请输入仓库名称"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">文件路径(path)</label>
            <div class="layui-input-block">
                <input type="text" name="path" autocomplete="off" placeholder="请输入文件的路径"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户授权码(access_token)</label>
            <div class="layui-input-block">
                <input type="text" name="accessToken" autocomplete="off" placeholder="请输入用户授权码"
                       class="layui-input">
            </div>
        </div>

    </div>
    <div class="c2">
        <button id="testButton" class="layui-btn layui-btn-primary layui-border-black">测试</button>
    </div>
    <div class="c3">
        <button id="clean" class="layui-btn layui-btn-primary layui-border-red">清空</button>
        <button id="import" class="layui-btn layui-btn-primary layui-border-red">导入</button>
        <button id="updateBookMark" class="layui-btn layui-btn-primary layui-border-red">推送</button>
        <button id="pullBookMark" class="layui-btn layui-btn-primary layui-border-red">拉取(不建议使用)</button>
    </div>
    <div class="c4">
        <span><b>提示：</b>清空：删除所有书签;导入：从gitee获取并生成新的书签。拉取：从码云拉取更新本地。推送：本地推送到码云。</span>
        <span><b>使用建议：</b>清空和导入可以联合使用进行同步，拉取更新本地书签需要先导入一份书签到浏览器,才能进行更新,且拉取后请立即推送。</span>
    </div>
    <div class="c6">
        <div class="layui-progress layui-progress-big" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="0%" id="handlePercent"></div>
        </div>
    </div>
</div>
</body>
<script src="static/js/popup.js" type="text/javascript"></script>
</html>