70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>simplegit · 公开仓库</title>
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2328; background: #f6f8fa; }
|
|
header { padding: 24px 32px; background: #24292f; color: #fff; }
|
|
header h1 { margin: 0; font-size: 20px; font-weight: 600; }
|
|
header p { margin: 4px 0 0; opacity: 0.8; }
|
|
main { max-width: 880px; margin: 24px auto; padding: 0 16px; }
|
|
.repo { background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
|
|
.repo-name { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 8px; word-break: break-all; }
|
|
.clone { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.url { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; padding: 6px 10px; word-break: break-all; }
|
|
.toggle { flex: 0 0 auto; font: inherit; font-size: 13px; padding: 6px 14px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; cursor: pointer; }
|
|
.toggle:hover { background: #f3f4f6; }
|
|
.empty { color: #57606a; text-align: center; padding: 48px 0; }
|
|
@media (prefers-color-scheme: dark) {
|
|
body { color: #c9d1d9; background: #0d1117; }
|
|
.repo { background: #161b22; border-color: #30363d; }
|
|
.url { background: #0d1117; border-color: #30363d; }
|
|
.toggle { background: #21262d; border-color: #30363d; color: #c9d1d9; }
|
|
.toggle:hover { background: #30363d; }
|
|
.empty { color: #8b949e; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>simplegit</h1>
|
|
<p>公开仓库</p>
|
|
</header>
|
|
<main>
|
|
{{range .Repos}}
|
|
<div class="repo">
|
|
<div class="repo-name">{{.Name}}</div>
|
|
<div class="clone">
|
|
<code class="url" data-http="{{.HTTPURL}}" data-ssh="{{.SSHURL}}" data-state="http">{{.HTTPURL}}</code>
|
|
{{if $.SSH}}<button type="button" class="toggle">SSH</button>{{end}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<p class="empty">暂无公开仓库</p>
|
|
{{end}}
|
|
</main>
|
|
<script>
|
|
document.querySelectorAll('.clone').forEach(function (box) {
|
|
var url = box.querySelector('.url');
|
|
var btn = box.querySelector('.toggle');
|
|
if (!btn) return;
|
|
btn.addEventListener('click', function () {
|
|
if (url.dataset.state === 'http') {
|
|
url.textContent = url.dataset.ssh;
|
|
url.dataset.state = 'ssh';
|
|
btn.textContent = 'HTTP';
|
|
} else {
|
|
url.textContent = url.dataset.http;
|
|
url.dataset.state = 'http';
|
|
btn.textContent = 'SSH';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|