103 lines
6.7 KiB
HTML
103 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>CodeZen - 中文项目发现</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZICHoG1rqPyoGrfglLcuPMLrP8okbNtGHJSAzJDPXwLSPM0i7MFLdeTqUYk" crossorigin="anonymous"></script>
|
|
<script>
|
|
tailwind.config = { darkMode: "class", theme: { extend: { colors: { "primary": "#137fec", "background-light": "#f6f7f8", "background-dark": "#101922" }, fontFamily: {"display": ["Inter", "sans-serif"]}, borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"} } } }
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 20px;}
|
|
.no-underline {text-decoration: none;}
|
|
.filter-button-active { background-color: #137fec !important; color: white !important; }
|
|
.dark .filter-button-active { background-color: #137fec !important; color: white !import
|
|
ant; }
|
|
.filter-button-active > div { color: white !important; }
|
|
.filter-button-active > p { color: white !important; }
|
|
.pagination-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0.5rem; transition: background-color 0.2s; }
|
|
.pagination-link-active { background-color: #137fec; color: white; cursor: default; }
|
|
.pagination-link-inactive { background-color: #e2e8f0; }
|
|
.dark .pagination-link-inactive { background-color: #1e293b; }
|
|
.pagination-link-disabled { color: #94a3b8; background-color: #f1f5f9; cursor: not-allowed; }
|
|
.dark .pagination-link-disabled { color: #475569; background-color: #1a2431; cursor: not-allowed; }
|
|
#theme-toggle-sun, #theme-toggle-moon { display: none; }
|
|
.dark #theme-toggle-sun { display: block; }
|
|
html:not(.dark) #theme-toggle-moon { display: block; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background-light dark:bg-background-dark font-display">
|
|
<div class="relative flex h-auto min-h-screen w-full flex-col">
|
|
<div class="layout-container flex h-full grow flex-col">
|
|
<div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-5">
|
|
<div class="layout-content-container flex flex-col flex-1">
|
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 px-4 sm:px-6 lg:px-10 py-3">
|
|
<a href="/" class="no-underline flex items-center gap-4 text-slate-800 dark:text-white">
|
|
<div class="size-6 text-primary"><span class="material-symbols-outlined" style="font-size: 24px;">hub</span></div>
|
|
<h2 class="text-slate-800 dark:text-white text-lg font-bold leading-tight tracking-[-0.015em]">CodeZen</h2>
|
|
</a>
|
|
<div class="flex flex-1 justify-end items-center gap-4 sm:gap-6">
|
|
|
|
<form id="search-form" action="/" method="get" class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64"
|
|
hx-get="/?sort={{ current_sort }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
|
|
hx-target="#main-content"
|
|
hx-swap="innerHTML"
|
|
hx-push-url="true"
|
|
hx-trigger="keyup[target.name=='q'] changed[target.name=='q'] delay:500ms">
|
|
|
|
<div class="flex w-full flex-1 items-stretch rounded-lg h-full">
|
|
<div class="text-slate-500 dark:text-slate-400 flex border border-r-0 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800/50 items-center justify-center pl-3 rounded-l-lg"><span class="material-symbols-outlined">search</span></div>
|
|
<input name="q" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-white focus:outline-0 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800/50 h-full placeholder:text-slate-400 dark:placeholder:text-slate-500 px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal" placeholder="搜索项目..." value="{{ search_query }}"/>
|
|
</div>
|
|
</form>
|
|
|
|
<button id="theme-toggle" type="button" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200">
|
|
<span id="theme-toggle-sun" class="material-symbols-outlined">light_mode</span>
|
|
<span id="theme-toggle-moon" class="material-symbols-outlined">dark_mode</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content" class="p-4 sm:p-6 lg:p-10 flex flex-col gap-6">
|
|
{% include '_projects_partial.html' %}
|
|
</main>
|
|
|
|
<footer class="text-center p-6 mt-auto text-sm text-slate-500 dark:text-slate-600 border-t border-slate-200 dark:border-slate-800">
|
|
<p>© {{ current_year }} CodeZen. 数据来源 GitHub.</p>
|
|
<p class="text-xs text-slate-400 dark:text-slate-700 mt-2">本页面数据由脚本自动抓取和汇总，非实时更新。</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
})();
|
|
|
|
window.onload = function() {
|
|
document.getElementById('theme-toggle').addEventListener('click', function() {
|
|
var html = document.documentElement;
|
|
if (html.classList.contains('dark')) {
|
|
html.classList.remove('dark');
|
|
localStorage.theme = 'light';
|
|
} else {
|
|
html.classList.add('dark');
|
|
localStorage.theme = 'dark';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |