picgo/view/index.html

218 lines
11 KiB
HTML
Raw Normal View History

2024-07-11 21:25:58 +08:00
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../static/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/css/bootstrap-icons.css">
<link rel="stylesheet" href="../static/css/sweetalert.css">
<title>域名监控</title>
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0">
<nav class="navbar justify-content-center navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">域名监控</span>
</nav>
</div>
<div class="container">
<div class="shadow p-3 bg-white rounded mt-3">
<div class="alert alert-primary form-inline" role="alert">
<button type="button" id="add-domain" class="btn btn-primary" data-toggle="modal"
data-target="#DomainModal"><i
class="bi bi-plus-lg"></i> 添加域名
</button>
<div class="input-group mr-3" style="position: absolute; right: 0">
<input type="text" id="search-input" class="form-control" placeholder="域名" aria-label="域名" aria-describedby="searc-btn">
<div class="input-group-append">
<button class="btn btn-primary" id="search-btn" type="button"><i class="bi bi-search"></i> 搜索
</button>
</div>
</div>
</div>
<div class="bg-light">
<table class="table table-bordered text-nowrap">
<thead>
<tr class="table-primary">
<th scope="col">编号</th>
<th scope="col">域名</th>
<th scope="col">Boce</th>
<th scope="col">备注</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="tbody-domin">
<script id="tpl-table-tr" type="text/html">
{{each domainList value index }}
<tr>
<td>{{index}}</td>
<td>
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="top"
title="{{value.name}}">
{{value.name|domainSubstring}}
</span>
</td>
{{if value.boce}}
<td><span class="badge rounded-pill bg-success">True</span></td>
{{else}}
<td><span class="badge rounded-pill bg-secondary">False</span></td>
{{/if}}
<td>{{value.remark}}</td>
<td>
<button type="button" class="btn btn-sm btn-primary"
onclick="window.open('{{value.name}}')"><i
class="bi bi-link-45deg"></i> 打开
</button>
<button type="button" class="btn btn-sm btn-warning edit-domain" data-index="{{index}}"
data-toggle="modal"
data-target="#DomainModal"><i
class="bi bi-pencil-square"></i> 编辑
</button>
<button type="button" class="btn btn-sm btn-danger delete-domain"
data-index="{{index}}"><i
class="bi bi-trash3"></i> 删除
</button>
</td>
</tr>
{{/each}}
</script>
</tbody>
</table>
<!-- 分页 -->
<nav>
<ul class="pagination justify-content-end" id="page-li">
<script id="tpl-page-li" type="text/html">
<!-- 上一页 -->
<li class="page-item{{if page_data.is_first}} disabled{{/if}}">
<a class="page-link page-btn" data-p="{{page_data.current_page-1}}"
href="javascript:void(0)">上一页</a>
</li>
<!-- 当前页左边是否显示 ... -->
{{if page_data.left_has_more }}
<li class="page-item"><a class="page-link page-btn" data-p="1" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><span class="page-link">...</span></li>
{{/if}}
<!-- 当前页左边显示按钮 -->
{{each page_data.left_pages lp}}
<li class="page-item"><a class="page-link page-btn" data-p="{{lp}}" href="javascript:void(0)">{{lp}}</a>
</li>
{{/each}}
<!-- 当前页 -->
<li class="page-item active"><span class="page-link">{{page_data.current_page}}</span></li>
<!-- 当前页右边是否显示 ... -->
{{each page_data.right_pages rp}}
<li class="page-item"><a class="page-link page-btn" data-p="{{rp}}" href="javascript:void(0)">{{rp}}</a>
</li>
{{/each}}
<!-- 当前页右边显示按钮 -->
{{if page_data.right_has_more }}
<li class="page-item"><span class="page-link">...</span></li>
<li class="page-item"><a class="page-link page-btn" data-p="{{page_data.num_pages}}"
href="javascript:void(0)">{{page_data.num_pages}}</a></li>
{{/if}}
<!-- 下一页 -->
<li class="page-item{{if page_data.is_finally}} disabled{{/if}}">
<a class="page-link page-btn" data-p="{{page_data.current_page+1}}"
href="javascript:void(0)">下一页</a>
</li>
</script>
</ul>
</nav>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="DomainModal" tabindex="-1" role="dialog" aria-labelledby="DomainModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="DomainModalLabel" modal-data="0">添加域名</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form class="col-auto">
<div class="form-group row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text alert-primary">域名:</div>
</div>
<input type="text" id="form-domain" class="form-control" placeholder="域名">
</div>
</div>
<div class="form-group row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text alert-primary">备注:</div>
</div>
<input type="text" id="form-remark" class="form-control" placeholder="备注">
</div>
</div>
<div class="form-group row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text alert-primary">秘钥:</div>
</div>
<input type="text" id="form-key" class="form-control" placeholder="cdn鉴权秘钥">
</div>
</div>
<div class="form-group row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text alert-primary">CDN: </div>
</div>
<div class="btn-group" data-toggle="buttons-cdn">
<label class="btn btn-light" style="margin-bottom: 0">
<input type="radio" name="options-cdn" id="cdn-t" autocomplete="off">True
</label>
<label class="btn btn-light" style="margin-bottom: 0">
<input type="radio" name="options-cdn" id="cdn-f" autocomplete="off" checked>False
</label>
<label style="margin-left:10px;color: red;height: 30px;line-height: 38px;">是否需要鉴权</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text alert-primary">Boce: </div>
</div>
<div class="btn-group" data-toggle="buttons-boce">
<label class="btn btn-light" style="margin-bottom: 0">
<input type="radio" name="options-boce" id="boce-t" autocomplete="off">True
</label>
<label class="btn btn-light" style="margin-bottom: 0">
<input type="radio" name="options-boce" id="boce-f" autocomplete="off" checked>False
</label>
<label style="margin-left:10px;color: red;height: 30px;line-height: 38px;">是否加到boce、17ce测试</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="submit-data">提交</button>
</div>
</div>
</div>
</div>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/template-web.js"></script>
<script src="../static/js/sweetalert.min.js"></script>
<script src="../static/js/index.js"></script>
</body>
</html>