1001 lines
33 KiB
HTML
1001 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>预览 16:08 · 投票</title>
|
|
<meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
|
|
<meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。">
|
|
<meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
|
|
|
|
<script>
|
|
(function () {
|
|
var m = document.cookie.match(/(?:^|;\s*)theme=([^;]*)/);
|
|
if (m && m[1] === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
|
|
})();
|
|
</script>
|
|
|
|
<link rel="preconnect" href="https://r2.337845818.best" crossorigin>
|
|
<link rel="preconnect" href="https://cdnjs.snrat.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/css/uikit.min.css"/>
|
|
|
|
<link rel="stylesheet" href="/static/css/base.css?v="/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://r2.337845818.best/tamabox/cdn/waline/client/v2/waline-no-commits.css" media="print" onload="this.media='all'"/>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.3/js/uikit-icons.min.js"></script>
|
|
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js"></script>
|
|
|
|
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waline/2.15.8/waline.js"></script>
|
|
|
|
<script src="/recaptcha/api.js" async defer></script>
|
|
<script>function onSubmit() {document.getElementById('form').submit();}</script>
|
|
|
|
|
|
|
|
|
|
|
|
<meta property="og:site_name" content="狼的提问箱 | 匿名提问箱" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="狼的提问箱 | 匿名提问箱" />
|
|
<meta property="og:url" content="/vote/abc123" />
|
|
<meta property="og:description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱,安全地倾诉与回应。" />
|
|
|
|
|
|
<meta itemprop="image" content="https://r2.337845818.best/tamabox/tamabox_low.png"/>
|
|
<meta name="msapplication-TileImage" content="https://r2.337845818.best/tamabox/tamabox_low.png"/>
|
|
<link rel="shortcut icon" href="https://r2.337845818.best/tamabox/tamabox_low.png" />
|
|
<link rel="apple-touch-icon" href="https://r2.337845818.best/tamabox/tamabox_low.png"/>
|
|
<link rel="icon" sizes="192x192" href="https://r2.337845818.best/tamabox/tamabox_low.png">
|
|
<meta name="twitter:image:src" content="https://r2.337845818.best/tamabox/tamabox_low.png" />
|
|
|
|
|
|
|
|
<meta name="google-site-verification" content="fEPwRRJfiGsgwc5SINBQwZhPK8F0cwRaOvRx0YRurI4" />
|
|
|
|
<script>
|
|
window.addEventListener("load", function () {
|
|
var s = document.createElement("script");
|
|
s.src = "https://mami.shiroko.one/tamami.js";
|
|
s.setAttribute("data-website-id", "c42ebe8b-9281-4da0-83a4-8f18b3e710fe");
|
|
document.body.appendChild(s);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.tbRenderQR = function (el, getOptions) {
|
|
if (!el || typeof QRCode === 'undefined') return;
|
|
var opts = getOptions();
|
|
function remoteOf(o, key) {
|
|
var v = o[key];
|
|
return (typeof v === 'string' && v.indexOf('http') === 0) ? v : '';
|
|
}
|
|
var good = window._tbQrGood || (window._tbQrGood = {});
|
|
var bad = window._tbQrBad || (window._tbQrBad = {});
|
|
|
|
function layerState(url) { return !url ? '' : (good[url] ? 1 : (bad[url] ? 0 : null)); }
|
|
var layers = [
|
|
{ url: remoteOf(opts, 'logo'), st: null, present: function (o, on) {
|
|
if (on) { } else { o.logo = undefined; o.logoWidth = undefined; o.logoHeight = undefined; o.logoBackgroundTransparent = undefined; }
|
|
} },
|
|
{ url: remoteOf(opts, 'backgroundImage'), st: null, present: function (o, on) {
|
|
if (on) { } else { o.backgroundImage = undefined; o.backgroundImageAlpha = undefined; }
|
|
} }
|
|
];
|
|
var needProbe = false;
|
|
for (var i = 0; i < layers.length; i++) {
|
|
layers[i].st = layerState(layers[i].url);
|
|
if (layers[i].st === null) needProbe = true;
|
|
}
|
|
function paint(states) {
|
|
var o = {};
|
|
for (var k in opts) o[k] = opts[k];
|
|
for (var j = 0; j < layers.length; j++) layers[j].present(o, states[j] === 1);
|
|
el.innerHTML = '';
|
|
new QRCode(el, o);
|
|
}
|
|
|
|
var initStates = [];
|
|
for (var n = 0; n < layers.length; n++) initStates.push(layers[n].st === 1 ? 1 : 0);
|
|
paint(initStates);
|
|
if (!needProbe) return;
|
|
|
|
var pending = 0, cross = opts.crossOrigin || 'anonymous';
|
|
layers.forEach(function (L) {
|
|
if (L.st !== null) return;
|
|
pending++;
|
|
var im = new Image();
|
|
im.onload = function () { good[L.url] = true; L.st = 1; onDone(); };
|
|
im.onerror = function () { bad[L.url] = true; L.st = 0; onDone(); };
|
|
if (cross) im.crossOrigin = cross;
|
|
im.src = L.url;
|
|
});
|
|
function onDone() {
|
|
if (--pending > 0) return;
|
|
var finalStates = [];
|
|
for (var m = 0; m < layers.length; m++) finalStates.push(layers[m].st === 1 ? 1 : 0);
|
|
var changed = false;
|
|
for (var q = 0; q < finalStates.length; q++) if (finalStates[q] !== initStates[q]) changed = true;
|
|
if (changed) paint(finalStates);
|
|
}
|
|
|
|
setTimeout(function () { if (pending > 0) { pending = 0; onDone(); } }, 3000);
|
|
};
|
|
</script>
|
|
<nav class="uk-navbar-container uk-margin tb-navbar" uk-navbar>
|
|
<div class="uk-navbar-center">
|
|
<div class="uk-navbar-center-left">
|
|
<div>
|
|
<ul class="uk-navbar-nav">
|
|
|
|
<li><a href="/explore">探索</a></li>
|
|
|
|
|
|
<li><a href="/_/test">我的</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="uk-navbar-item uk-logo" href="/"><span class="emoji-placeholder" aria-label="random animal">🐺</span>的提问箱</a>
|
|
|
|
<div class="uk-navbar-center-right">
|
|
<div>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li><a href="/user/questions">提问</a></li>
|
|
</ul>
|
|
<ul class="uk-navbar-nav">
|
|
<li><a href="/user/profile">设置</a></li>
|
|
</ul>
|
|
|
|
|
|
|
|
<ul class="uk-navbar-nav tb-nav-utils">
|
|
<li>
|
|
<a href="#" aria-label="语言" title="语言"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3.2 9h17.6M3.2 15h17.6"/><ellipse cx="12" cy="12" rx="4" ry="9"/></svg></a>
|
|
<div class="uk-navbar-dropdown" uk-drop="mode: click; pos: bottom-right">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
|
|
<li class="uk-active">
|
|
<a href="/i18n/zh-CN?to=%2Fvote%2Fabc123">简体中文</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<ul class="uk-navbar-nav tb-nav-utils">
|
|
<li>
|
|
<a href="#" id="theme-toggle" title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
|
|
<span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const emojis = ["🐺","🐗","🐻","🐨","🐼","🐹","🐭","🐰","🦊","🐮","🐷","🐽","🐸","🐒","🦍","🐔","🐧","🐦","🐤","🐦⬛","🦅","🦉","🦇","🐴","🦄","🐝","🦎","🦖","🦕","🐙","🦑","🦐","🦞","🦀","🐡","🐠","🐟","🐬","🐳","🐋","🦈","🐊","🐅","🐆","🦓","🦍","🦧","🐘","🦛","🦏","🐪","🐫","🦒","🦘","🐃","🐂","🐄","🐎","🐖","🐏","🐑","🦙","🐐","🦌","🐕","🐩","🦮","🐕🦺","🐈","🐋","🐳","🐬","🐉","🐲"];
|
|
const placeholder = document.querySelector('.emoji-placeholder');
|
|
if (placeholder) {
|
|
placeholder.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<div id="tb-mobile-utils">
|
|
|
|
<select id="mobile-lang-select" class="uk-select uk-form-small" aria-label="语言">
|
|
|
|
<option value="zh-CN" selected>简体中文</option>
|
|
|
|
</select>
|
|
|
|
<button type="button" id="theme-toggle-mobile" class="uk-button uk-button-default uk-button-small"
|
|
title="切换深色/浅色模式" aria-label="切换深色/浅色模式">
|
|
<span class="tb-icon-light"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8z"/></svg></span><span class="tb-icon-dark"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></svg></span>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
|
|
var THEME_COOKIE = 'theme';
|
|
function getTheme() {
|
|
var m = document.cookie.match(/(?:^|;\s*)theme=([^;]*)/);
|
|
return m ? m[1] : '';
|
|
}
|
|
function applyTheme(theme) {
|
|
if (theme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
}
|
|
}
|
|
function toggleTheme() {
|
|
var next = getTheme() === 'dark' ? 'light' : 'dark';
|
|
applyTheme(next);
|
|
var expires = new Date(Date.now() + 365 * 24 * 3600 * 1000).toUTCString();
|
|
document.cookie = THEME_COOKIE + '=' + next + '; path=/; max-age=' + (365 * 24 * 3600) + '; SameSite=Lax';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var buttons = document.querySelectorAll('#theme-toggle, #theme-toggle-mobile');
|
|
buttons.forEach(function(btn) {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
toggleTheme();
|
|
});
|
|
});
|
|
|
|
|
|
var langSel = document.getElementById('mobile-lang-select');
|
|
if (langSel) {
|
|
langSel.addEventListener('change', function() {
|
|
if (!this.value) return;
|
|
var to = window.location.pathname + window.location.search;
|
|
window.location.href = '/i18n/' + encodeURIComponent(this.value) + '?to=' + encodeURIComponent(to);
|
|
});
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
|
|
<div class="uk-container uk-container-xsmall">
|
|
|
|
|
|
|
|
<style>
|
|
.truncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
}
|
|
.explore-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-right: 15px;
|
|
}
|
|
.explore-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.explore-name {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.explore-name a {
|
|
text-decoration: none;
|
|
color: var(--tb-text);
|
|
}
|
|
.explore-name a:hover {
|
|
color: var(--tb-primary);
|
|
}
|
|
.explore-intro {
|
|
color: var(--tb-text-secondary);
|
|
margin-bottom: 10px;
|
|
font-size: 0.9rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 2.6em;
|
|
}
|
|
.explore-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
.explore-tags .uk-label {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.recommend-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background: var(--tb-surface-2);
|
|
border-radius: 8px;
|
|
transition: background 0.2s;
|
|
}
|
|
.recommend-card:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
.recommend-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
.recommend-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.recommend-name {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
}
|
|
.recommend-name a {
|
|
text-decoration: none;
|
|
color: var(--tb-text);
|
|
}
|
|
.recommend-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 3px;
|
|
margin-top: 3px;
|
|
}
|
|
.recommend-tags .uk-label {
|
|
font-size: 0.7rem;
|
|
padding: 0 5px;
|
|
}
|
|
.hot-votes-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
.hot-vote-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--tb-border);
|
|
border-radius: 8px;
|
|
background: var(--tb-surface-2);
|
|
text-decoration: none;
|
|
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.hot-vote-item:hover {
|
|
border-color: var(--tb-primary);
|
|
background: #f5faff;
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
}
|
|
.hot-vote-content {
|
|
min-width: 0;
|
|
}
|
|
.hot-vote-title {
|
|
display: block;
|
|
overflow: hidden;
|
|
color: var(--tb-text);
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hot-vote-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin-top: 8px;
|
|
}
|
|
.hot-vote-meta .uk-label {
|
|
font-size: 0.72rem;
|
|
line-height: 1.6;
|
|
}
|
|
.hot-vote-action {
|
|
flex: 0 0 auto;
|
|
color: var(--tb-primary);
|
|
font-size: 0.82rem;
|
|
white-space: nowrap;
|
|
}
|
|
html[data-theme="dark"] .hot-vote-item {
|
|
border-color: var(--tb-border);
|
|
background: var(--tb-surface-2);
|
|
}
|
|
html[data-theme="dark"] .hot-vote-item:hover {
|
|
border-color: var(--tb-primary);
|
|
background: rgba(78, 168, 245, 0.10);
|
|
}
|
|
html[data-theme="dark"] .hot-vote-title {
|
|
color: var(--tb-text);
|
|
}
|
|
@media (max-width: 640px) {
|
|
.hot-votes-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.hot-vote-item {
|
|
padding: 14px;
|
|
}
|
|
}
|
|
.explore-tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
margin: 2px auto 20px;
|
|
max-width: 320px;
|
|
border: 1px solid var(--tb-border);
|
|
border-radius: 9px;
|
|
background: var(--tb-surface-2);
|
|
}
|
|
.explore-tab {
|
|
border: 0;
|
|
border-radius: 6px;
|
|
padding: 8px 15px;
|
|
background: transparent;
|
|
color: var(--tb-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
.explore-tab:hover { color: var(--tb-primary); }
|
|
.explore-tab.is-active {
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
|
|
color: var(--tb-primary);
|
|
font-weight: 600;
|
|
}
|
|
.explore-panel[hidden] { display: none !important; }
|
|
.explore-vote-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.explore-vote-toolbar p { margin: 4px 0 0; }
|
|
.vote-random-btn {
|
|
flex: 0 0 auto;
|
|
border: 1px solid #dce9ff;
|
|
border-radius: 7px;
|
|
padding: 7px 11px;
|
|
color: var(--tb-primary);
|
|
background: #f5faff;
|
|
cursor: pointer;
|
|
font-size: 0.84rem;
|
|
}
|
|
.vote-random-btn:hover { border-color: var(--tb-primary); background: #edf6ff; }
|
|
.all-votes-list { display: grid; gap: 10px; }
|
|
.all-vote-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--tb-border);
|
|
text-decoration: none;
|
|
}
|
|
.all-vote-item:first-child { border-top: 1px solid var(--tb-border); }
|
|
.all-vote-item:hover { background: #f8fbff; text-decoration: none; }
|
|
.all-vote-item .hot-vote-title { max-width: 100%; }
|
|
html[data-theme="dark"] .explore-tabs {
|
|
border-color: var(--tb-border);
|
|
background: var(--tb-surface-2);
|
|
}
|
|
html[data-theme="dark"] .explore-tab { color: var(--tb-text-muted); }
|
|
html[data-theme="dark"] .explore-tab.is-active { background: var(--tb-surface); color: var(--tb-primary); }
|
|
html[data-theme="dark"] .vote-random-btn { border-color: var(--tb-border); background: var(--tb-surface-2); color: var(--tb-primary); }
|
|
html[data-theme="dark"] .all-vote-item { border-color: var(--tb-border); }
|
|
html[data-theme="dark"] .all-vote-item:hover { background: rgba(78, 168, 245, 0.10); }
|
|
.explore-notice {
|
|
background: #f0f7ff;
|
|
border-left: 4px solid var(--tb-primary);
|
|
padding: 15px 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
color: var(--tb-text);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
.explore-notice strong {
|
|
color: var(--tb-primary);
|
|
}
|
|
|
|
.tb-shuffle-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 14px;
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
color: var(--tb-primary);
|
|
background: transparent;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
.tb-shuffle-btn:hover {
|
|
background: #f0f7ff;
|
|
border-color: var(--tb-primary);
|
|
}
|
|
.tb-shuffle-btn:active {
|
|
transform: scale(0.96);
|
|
}
|
|
.tb-shuffle-btn .uk-icon {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.tb-shuffle-btn.is-spinning .uk-icon {
|
|
transform: rotate(360deg);
|
|
}
|
|
html[data-theme="dark"] .tb-shuffle-btn {
|
|
color: #4ea8f5;
|
|
border-color: #3a3f45;
|
|
}
|
|
html[data-theme="dark"] .tb-shuffle-btn:hover {
|
|
background: rgba(78, 168, 245, 0.12);
|
|
border-color: #4ea8f5;
|
|
}
|
|
</style>
|
|
|
|
<div class="uk-container uk-container-small">
|
|
<h2>探索用户标签</h2>
|
|
|
|
<div class="explore-notice">
|
|
<p>此处展示已开启<span class="uk-text-bold">“在首页展示我的标签”</span>的用户。该功能默认关闭,若希望自己的提问箱在这里被发现,请前往 <a href="/user/profile" class="uk-text-bold">个人设置</a> 手动开启。</p>
|
|
</div>
|
|
|
|
<div class="explore-tabs" role="tablist" aria-label="探索用户标签">
|
|
<button type="button" class="explore-tab is-active" data-explore-tab="questions" role="tab" aria-selected="true">提问</button>
|
|
<button type="button" class="explore-tab" data-explore-tab="votes" role="tab" aria-selected="false">投票</button>
|
|
</div>
|
|
|
|
<div class="explore-panel" data-explore-panel="questions">
|
|
<div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
|
|
<div class="uk-flex uk-flex-between uk-flex-middle">
|
|
<h3 class="uk-card-title uk-margin-remove">随机推荐</h3>
|
|
<button class="tb-shuffle-btn" id="refresh-recommend" type="button">
|
|
<span uk-icon="icon: refresh"></span> 换一批
|
|
</button>
|
|
</div>
|
|
<div id="recommend-list" class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-grid-match" uk-grid>
|
|
|
|
<div class="uk-text-center uk-padding">暂无推荐用户</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
|
|
<h4 class="uk-card-title uk-margin-remove-bottom">热门标签</h4>
|
|
<div class="uk-margin-small-top uk-flex uk-flex-wrap uk-flex-middle" style="gap: 6px;">
|
|
|
|
<a class="tb-chip" href="/explore?q=%E6%9D%82%E8%B0%88">#杂谈</a>
|
|
|
|
<a class="tb-chip" href="/explore?q=%E5%AD%A6%E4%B9%A0">#学习</a>
|
|
|
|
<a class="tb-chip" href="/explore?q=%E9%9F%B3%E4%B9%90">#音乐</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<form method="get" action="/explore" class="uk-margin uk-margin-bottom">
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand">
|
|
<div class="uk-inline uk-width-1-1">
|
|
<button class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search" type="submit"></button>
|
|
<input class="uk-input" type="text" name="q" placeholder="搜索标签..." value="">
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-auto">
|
|
<select name="sort" class="uk-select" onchange="this.form.submit()">
|
|
<option value="latest" selected>最新加入</option>
|
|
<option value="oldest" >最早加入</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
<div class="uk-child-width-1-1 uk-child-width-1-2@s uk-grid-match" uk-grid>
|
|
|
|
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
|
|
<div class="uk-flex uk-flex-top">
|
|
<div>
|
|
<img class="explore-avatar" src="" alt="avatar">
|
|
</div>
|
|
<div class="explore-info">
|
|
<div class="explore-name truncate">
|
|
<a href="/_/tamakyi" title="小狼">小狼</a>
|
|
</div>
|
|
<div class="explore-intro" title="随便问,友善一点,看到都会回。">
|
|
随便问,友善一点,看到都会回。
|
|
</div>
|
|
<div class="explore-tags">
|
|
|
|
<span class="uk-text-muted">无标签</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
|
|
<div class="uk-flex uk-flex-top">
|
|
<div>
|
|
<img class="explore-avatar" src="" alt="avatar">
|
|
</div>
|
|
<div class="explore-info">
|
|
<div class="explore-name truncate">
|
|
<a href="/_/kitsune" title="Kitsune">Kitsune</a>
|
|
</div>
|
|
<div class="explore-intro" title="摄影 / 音乐 / 一点点代码">
|
|
摄影 / 音乐 / 一点点代码
|
|
</div>
|
|
<div class="explore-tags">
|
|
|
|
<span class="uk-text-muted">无标签</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
|
|
<div class="uk-flex uk-flex-top">
|
|
<div>
|
|
<img class="explore-avatar" src="" alt="avatar">
|
|
</div>
|
|
<div class="explore-info">
|
|
<div class="explore-name truncate">
|
|
<a href="/_/echo" title="残响">残响</a>
|
|
</div>
|
|
<div class="explore-intro" title="长期潜水,偶尔冒泡。">
|
|
长期潜水,偶尔冒泡。
|
|
</div>
|
|
<div class="explore-tags">
|
|
|
|
<span class="uk-text-muted">无标签</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
|
|
<div class="uk-flex uk-flex-top">
|
|
<div>
|
|
<img class="explore-avatar" src="" alt="avatar">
|
|
</div>
|
|
<div class="explore-info">
|
|
<div class="explore-name truncate">
|
|
<a href="/_/mika" title="Mika">Mika</a>
|
|
</div>
|
|
<div class="explore-intro" title="想认识更多有趣的人。">
|
|
想认识更多有趣的人。
|
|
</div>
|
|
<div class="explore-tags">
|
|
|
|
<span class="uk-text-muted">无标签</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul class="uk-pagination uk-flex-center uk-margin-top" uk-margin>
|
|
|
|
<li class="uk-disabled"><span><span uk-pagination-previous></span> 上一页</span></li>
|
|
|
|
<li class="uk-active"><span>1 / 1</span></li>
|
|
|
|
<li class="uk-disabled"><span>下一页 <span uk-pagination-next></span></span></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="explore-panel" data-explore-panel="votes" hidden>
|
|
<div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
|
|
<div class="explore-vote-toolbar">
|
|
<div>
|
|
<h3 class="uk-card-title uk-margin-remove">公开投票</h3>
|
|
<p class="uk-text-meta uk-text-small">浏览正在进行的公开投票,选择你感兴趣的主题参与。</p>
|
|
</div>
|
|
<button type="button" class="vote-random-btn" id="random-vote-btn"><span uk-icon="icon: refresh; ratio: .8"></span> 随机推荐</button>
|
|
</div>
|
|
|
|
|
|
|
|
<h4 class="uk-heading-bullet uk-margin-medium-top uk-margin-small-bottom">全部投票</h4>
|
|
|
|
<div class="uk-alert uk-alert-primary uk-margin-remove">暂时没有可参与的公开投票。</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const recommendContainer = document.getElementById('recommend-list');
|
|
const refreshBtn = document.getElementById('refresh-recommend');
|
|
const tabs = document.querySelectorAll('[data-explore-tab]');
|
|
const panels = document.querySelectorAll('[data-explore-panel]');
|
|
|
|
function showExplorePanel(name) {
|
|
tabs.forEach(function(tab) {
|
|
const active = tab.dataset.exploreTab === name;
|
|
tab.classList.toggle('is-active', active);
|
|
tab.setAttribute('aria-selected', active ? 'true' : 'false');
|
|
});
|
|
panels.forEach(function(panel) {
|
|
panel.hidden = panel.dataset.explorePanel !== name;
|
|
});
|
|
if (window.history && window.history.replaceState) {
|
|
window.history.replaceState({}, document.title, window.location.pathname + (name === 'votes' ? '#votes' : ''));
|
|
}
|
|
}
|
|
|
|
tabs.forEach(function(tab) {
|
|
tab.addEventListener('click', function() { showExplorePanel(tab.dataset.exploreTab); });
|
|
});
|
|
if (window.location.hash === '#votes') showExplorePanel('votes');
|
|
|
|
const randomVoteBtn = document.getElementById('random-vote-btn');
|
|
if (randomVoteBtn) {
|
|
randomVoteBtn.addEventListener('click', function() {
|
|
const votes = Array.from(document.querySelectorAll('#all-votes-list .all-vote-item'));
|
|
if (!votes.length) return;
|
|
const target = votes[Math.floor(Math.random() * votes.length)];
|
|
randomVoteBtn.classList.add('is-spinning');
|
|
target.style.outline = '2px solid #1e87f0';
|
|
target.style.outlineOffset = '2px';
|
|
window.setTimeout(function() {
|
|
window.location.href = target.href;
|
|
}, 350);
|
|
});
|
|
}
|
|
|
|
|
|
function extractUsers(obj) {
|
|
if (Array.isArray(obj)) return obj;
|
|
if (!obj || typeof obj !== 'object') return [];
|
|
|
|
if (obj.domain || obj.id) {
|
|
return [obj];
|
|
}
|
|
|
|
if (obj.data) {
|
|
return extractUsers(obj.data);
|
|
}
|
|
|
|
for (const key in obj) {
|
|
if (obj.hasOwnProperty(key)) {
|
|
const val = obj[key];
|
|
if (Array.isArray(val)) {
|
|
return val;
|
|
} else if (val && typeof val === 'object') {
|
|
const result = extractUsers(val);
|
|
if (result.length > 0) return result;
|
|
}
|
|
}
|
|
}
|
|
return [];
|
|
}
|
|
|
|
function escapeHTML(str) {
|
|
if (str == null) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
|
|
function safeAvatarURL(url) {
|
|
if (typeof url !== 'string') return '';
|
|
if (/^https?:\/\//i.test(url)) return url;
|
|
return '';
|
|
}
|
|
|
|
function loadRandomRecommend() {
|
|
recommendContainer.innerHTML = '<div class="uk-text-center uk-padding"><div uk-spinner></div> 加载中...</div>';
|
|
fetch('/api/v1/explore/random')
|
|
.then(response => {
|
|
if (!response.ok) throw new Error(`HTTP 加载失败 ${response.status}`);
|
|
return response.json();
|
|
})
|
|
.then(resp => {
|
|
const users = extractUsers(resp);
|
|
if (users.length === 0) {
|
|
recommendContainer.innerHTML = '<div class="uk-text-center uk-padding">暂无推荐用户</div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
users.forEach(user => {
|
|
let tagsHtml = '';
|
|
if (user.tag_list && user.tag_list.length) {
|
|
user.tag_list.forEach((tag, idx) => {
|
|
const colorClass = (user.tag_color && user.tag_color[idx]) || 'uk-label-default';
|
|
tagsHtml += `<span class="uk-label ${escapeHTML(colorClass)}" title="${escapeHTML(tag)}">${escapeHTML(tag)}</span>`;
|
|
});
|
|
} else {
|
|
tagsHtml = '<span class="uk-text-muted">无标签</span>';
|
|
}
|
|
html += `
|
|
<div>
|
|
<a href="/_/${escapeHTML(user.domain)}" class="recommend-card">
|
|
<img class="recommend-avatar" src="${safeAvatarURL(user.avatar)}" alt="avatar">
|
|
<div class="recommend-info">
|
|
<div class="recommend-name truncate">${escapeHTML(user.name)}</div>
|
|
<div class="recommend-tags">${tagsHtml}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`;
|
|
});
|
|
recommendContainer.innerHTML = html;
|
|
if (window.UIkit && UIkit.grid) {
|
|
UIkit.grid(recommendContainer);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Failed to load random recommends:', error);
|
|
recommendContainer.innerHTML = '<div class="uk-alert uk-alert-danger">加载失败:' + escapeHTML(error.message) + '</div>';
|
|
});
|
|
}
|
|
|
|
|
|
refreshBtn.addEventListener('click', function() {
|
|
|
|
refreshBtn.classList.remove('is-spinning');
|
|
void refreshBtn.offsetWidth;
|
|
refreshBtn.classList.add('is-spinning');
|
|
loadRandomRecommend();
|
|
});
|
|
});
|
|
</script>
|
|
<p class=" uk-text-right uk-text-muted uk-text-small">
|
|
<br>
|
|
<a href="/rules">社区规则</a> |
|
|
|
|
<a href="https://box.shiroko.one/_/tamakyi" target="_blank">找站长</a>
|
|
<br>
|
|
<a href="https://share.shiroko.one" target="_blank">盘</a>
|
|
| <a href="https://blog.shiroko.one" target="_blank">公告板</a>
|
|
| <a href="https://chat.shiroko.one" target="_blank">聊天室</a>
|
|
| <a href="https://status.shiroko.one" target="_blank">监控板</a>
|
|
| <a href="https://shiroko.one" target="_blank">导航页</a>
|
|
<br>Powered by NekoBox |
|
|
<br>提问箱已成功存活:<span id="box_runtime"></span>
|
|
</p>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
(function () {
|
|
var create = Math.round(Date.UTC(2023, 6, 1, 18, 15, 43) / 1000);
|
|
function tick() {
|
|
var el = document.getElementById("box_runtime");
|
|
if (!el) return;
|
|
var s = Math.round((Date.now() + 8 * 3600 * 1000) / 1000) - create;
|
|
var t = [0, 0, 0, 0, 0];
|
|
if (s >= 31536000) { t[0] = s / 31536000 | 0; s %= 31536000; }
|
|
if (s >= 86400) { t[1] = s / 86400 | 0; s %= 86400; }
|
|
if (s >= 3600) { t[2] = s / 3600 | 0; s %= 3600; }
|
|
if (s >= 60) { t[3] = s / 60 | 0; s %= 60; }
|
|
if (s > 0) { t[4] = s; }
|
|
el.innerHTML = t[0] + '年 ' + t[1] + '天 ' + t[2] + '时 ' + t[3] + '分 ' + t[4] + '秒 ';
|
|
}
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
})();
|
|
</script>
|
|
<br>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var SUBMIT_I18N = {
|
|
submitting: '提交中...',
|
|
uploading: '上传中...'
|
|
};
|
|
|
|
function tbResetSubmitButtons() {
|
|
document.querySelectorAll('button[data-tb-submitting]').forEach(function(b) {
|
|
b.disabled = false;
|
|
b.removeAttribute('data-tb-submitting');
|
|
var orig = b.getAttribute('data-tb-restore');
|
|
if (orig !== null) {
|
|
b.innerHTML = orig;
|
|
b.removeAttribute('data-tb-restore');
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('submit', function(e) {
|
|
var form = e.target;
|
|
if (!form || form.tagName !== 'FORM') return;
|
|
|
|
|
|
|
|
if (e.defaultPrevented || form.getAttribute('data-tb-skip-submit-feedback') === '1') {
|
|
form.removeAttribute('data-tb-skip-submit-feedback');
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
if (form.getAttribute('target') === '_blank') return;
|
|
|
|
|
|
var trigger = e.submitter || form.querySelector('button[type="submit"]');
|
|
|
|
|
|
var hasFile = false;
|
|
form.querySelectorAll('input[type="file"]').forEach(function(f) {
|
|
if (f.files && f.files.length > 0) hasFile = true;
|
|
});
|
|
var label = hasFile ? SUBMIT_I18N.uploading : SUBMIT_I18N.submitting;
|
|
|
|
if (trigger && trigger.tagName === 'BUTTON') {
|
|
trigger.setAttribute('data-tb-restore', trigger.innerHTML);
|
|
trigger.innerHTML = '<span uk-spinner="ratio: 0.6"></span> ' + label;
|
|
}
|
|
|
|
|
|
form.querySelectorAll('button').forEach(function(b) {
|
|
b.disabled = true;
|
|
b.setAttribute('data-tb-submitting', '1');
|
|
});
|
|
});
|
|
|
|
|
|
window.addEventListener('pageshow', tbResetSubmitButtons);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|