Add static links dashboard
Includes JSON-ordered link cards, search/sort, favorites, CRUD, and import/export with localStorage. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dsyoon
25
README.md
Normal file
25
README.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# Links (개인 링크 홈)
|
||||
|
||||
정적 파일(HTML/CSS/JS)만으로 만든 개인 링크 대시보드입니다.
|
||||
|
||||
## 사용법
|
||||
|
||||
- **가장 간단한 방법**: `index.html`을 브라우저로 열기
|
||||
- 즐겨찾기/추가/편집/삭제/정렬/검색/가져오기/내보내기 기능은 정상 동작합니다.
|
||||
- 기본 링크 목록은 `index.html` 내부의 `linksData`(JSON)에서 읽기 때문에 **파이썬 실행 없이도** 순서가 그대로 반영됩니다.
|
||||
|
||||
- (선택) `links.json`을 별도 파일로 운용하고 싶다면 로컬 서버로 실행
|
||||
|
||||
```bash
|
||||
python3 -m http.server 8000
|
||||
```
|
||||
|
||||
그 후 브라우저에서 `http://localhost:8000`으로 접속합니다.
|
||||
|
||||
## 데이터 저장
|
||||
|
||||
- 기본 링크: `links.json`
|
||||
- 사용자가 추가/편집/삭제한 내용: 브라우저 `localStorage`에 저장됩니다.
|
||||
- 내보내기: 현재 화면 기준 링크를 JSON으로 다운로드합니다.
|
||||
- 가져오기: 내보내기 JSON(배열 또는 `{links:[...]}`)을 다시 불러옵니다.
|
||||
|
||||
251
index.html
Normal file
251
index.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>NCue | 개인 링크 홈</title>
|
||||
<meta name="description" content="개인 서비스 링크를 모아 관리하는 홈 화면" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<script defer src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="wrap">
|
||||
<div class="brand">
|
||||
<div class="logo" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M10.5 13.5l3-3m-1.24-3.13l-2.86-2.86a4 4 0 0 0-5.66 5.66l2.86 2.86"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5l2.86 2.86a4 4 0 0 1-5.66 5.66l-2.86-2.86"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-title">NCue</div>
|
||||
<div class="brand-sub" id="subtitle">개인 링크 관리</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn" id="btnAdd" type="button">
|
||||
<span class="btn-ico" aria-hidden="true">+</span>
|
||||
추가
|
||||
</button>
|
||||
<button class="btn" id="btnImport" type="button">가져오기</button>
|
||||
<button class="btn" id="btnExport" type="button">내보내기</button>
|
||||
<button class="btn" id="btnTheme" type="button" aria-pressed="false" title="테마 전환">
|
||||
테마
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="wrap" id="main">
|
||||
<section class="panel">
|
||||
<div class="controls">
|
||||
<label class="field">
|
||||
<span class="field-label">검색</span>
|
||||
<input
|
||||
id="q"
|
||||
class="input"
|
||||
type="search"
|
||||
placeholder="제목/도메인/태그 검색…"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">정렬</span>
|
||||
<select id="sort" class="select">
|
||||
<option value="json">파일 순서</option>
|
||||
<option value="recent">최근 수정</option>
|
||||
<option value="name">이름</option>
|
||||
<option value="domain">도메인</option>
|
||||
<option value="favorite">즐겨찾기 우선</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="check">
|
||||
<input id="onlyFav" type="checkbox" />
|
||||
<span>즐겨찾기만</span>
|
||||
</label>
|
||||
|
||||
<div class="meta" id="meta" aria-live="polite"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid" id="grid" aria-label="링크 목록"></section>
|
||||
|
||||
<section class="empty" id="empty" hidden>
|
||||
<div class="empty-title">표시할 링크가 없습니다.</div>
|
||||
<div class="empty-sub">상단의 “추가” 버튼으로 새 링크를 등록하세요.</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
|
||||
<div class="modal-backdrop" data-close="1"></div>
|
||||
<div class="modal-card" role="document">
|
||||
<div class="modal-head">
|
||||
<div class="modal-title" id="modalTitle">링크 추가</div>
|
||||
<button class="icon-btn" type="button" id="btnClose" title="닫기" aria-label="닫기">×</button>
|
||||
</div>
|
||||
|
||||
<form id="form" class="modal-body">
|
||||
<input type="hidden" id="id" />
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">제목</span>
|
||||
<input id="title" class="input" type="text" required maxlength="80" placeholder="예: Git" />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">URL</span>
|
||||
<input
|
||||
id="url"
|
||||
class="input"
|
||||
type="url"
|
||||
required
|
||||
placeholder="예: https://example.com"
|
||||
inputmode="url"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<div class="hint">http(s) URL을 권장합니다. (미입력 시 자동으로 https://가 붙습니다)</div>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">설명</span>
|
||||
<input id="description" class="input" type="text" maxlength="140" placeholder="선택" />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">태그</span>
|
||||
<input id="tags" class="input" type="text" placeholder="예: ncue, dev (쉼표로 구분)" />
|
||||
</label>
|
||||
|
||||
<label class="check">
|
||||
<input id="favorite" type="checkbox" />
|
||||
<span>즐겨찾기</span>
|
||||
</label>
|
||||
|
||||
<div class="modal-foot">
|
||||
<button class="btn btn-ghost" type="button" id="btnCancel">취소</button>
|
||||
<button class="btn btn-primary" type="submit" id="btnSave">저장</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden file input for import -->
|
||||
<input id="file" type="file" accept="application/json" hidden />
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
|
||||
|
||||
<!--
|
||||
기본 링크 데이터(서버 없이 index.html만 열어도 동작)
|
||||
이 배열 순서가 "파일 순서" 정렬 기준이 됩니다.
|
||||
-->
|
||||
<script id="linksData" type="application/json">
|
||||
[
|
||||
{
|
||||
"id": "dsyoon-ncue-net",
|
||||
"title": "DSYoon",
|
||||
"url": "https://ncue.net/dsyoon",
|
||||
"description": "개인 페이지",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "family-ncue-net",
|
||||
"title": "Family",
|
||||
"url": "https://ncue.net/family",
|
||||
"description": "Family",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "git-ncue-net",
|
||||
"title": "Git",
|
||||
"url": "https://git.ncue.net/",
|
||||
"description": "NCUE Git 서비스",
|
||||
"tags": ["dev", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "mail-ncue-net",
|
||||
"title": "Mail",
|
||||
"url": "https://mail.ncue.net/",
|
||||
"description": "NCUE 메일",
|
||||
"tags": ["mail", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "meeting-ncue-net",
|
||||
"title": "Meeting",
|
||||
"url": "https://meeting.ncue.net/",
|
||||
"description": "NCUE 미팅",
|
||||
"tags": ["meeting", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "openclaw-ncue-net",
|
||||
"title": "OpenClaw",
|
||||
"url": "https://openclaw.ncue.net/",
|
||||
"description": "OpenClaw",
|
||||
"tags": ["tool", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "link-ncue-net",
|
||||
"title": "Link",
|
||||
"url": "https://link.ncue.net/",
|
||||
"description": "NCUE 링크 허브",
|
||||
"tags": ["link", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "dreamgirl-ncue-net",
|
||||
"title": "DreamGirl",
|
||||
"url": "https://ncue.net/dreamgirl",
|
||||
"description": "DreamGirl",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<noscript>
|
||||
<div class="noscript">이 페이지는 JavaScript가 필요합니다.</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
82
links.json
Normal file
82
links.json
Normal file
@@ -0,0 +1,82 @@
|
||||
[
|
||||
{
|
||||
"id": "dsyoon-ncue-net",
|
||||
"title": "DSYoon",
|
||||
"url": "https://ncue.net/dsyoon",
|
||||
"description": "개인 페이지",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "family-ncue-net",
|
||||
"title": "Family",
|
||||
"url": "https://ncue.net/family",
|
||||
"description": "Family",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "git-ncue-net",
|
||||
"title": "Git",
|
||||
"url": "https://git.ncue.net/",
|
||||
"description": "NCUE Git 서비스",
|
||||
"tags": ["dev", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "mail-ncue-net",
|
||||
"title": "Mail",
|
||||
"url": "https://mail.ncue.net/",
|
||||
"description": "NCUE 메일",
|
||||
"tags": ["mail", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "meeting-ncue-net",
|
||||
"title": "Meeting",
|
||||
"url": "https://meeting.ncue.net/",
|
||||
"description": "NCUE 미팅",
|
||||
"tags": ["meeting", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "openclaw-ncue-net",
|
||||
"title": "OpenClaw",
|
||||
"url": "https://openclaw.ncue.net/",
|
||||
"description": "OpenClaw",
|
||||
"tags": ["tool", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "link-ncue-net",
|
||||
"title": "Link",
|
||||
"url": "https://link.ncue.net/",
|
||||
"description": "NCUE 링크 허브",
|
||||
"tags": ["link", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "dreamgirl-ncue-net",
|
||||
"title": "DreamGirl",
|
||||
"url": "https://ncue.net/dreamgirl",
|
||||
"description": "DreamGirl",
|
||||
"tags": ["personal", "ncue"],
|
||||
"favorite": false,
|
||||
"createdAt": "2026-02-07T00:00:00.000Z",
|
||||
"updatedAt": "2026-02-07T00:00:00.000Z"
|
||||
}
|
||||
]
|
||||
629
script.js
Normal file
629
script.js
Normal file
@@ -0,0 +1,629 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
const STORAGE_KEY = "links_home_v1";
|
||||
const THEME_KEY = "links_home_theme_v1";
|
||||
|
||||
const el = {
|
||||
subtitle: document.getElementById("subtitle"),
|
||||
q: document.getElementById("q"),
|
||||
sort: document.getElementById("sort"),
|
||||
onlyFav: document.getElementById("onlyFav"),
|
||||
meta: document.getElementById("meta"),
|
||||
grid: document.getElementById("grid"),
|
||||
empty: document.getElementById("empty"),
|
||||
btnAdd: document.getElementById("btnAdd"),
|
||||
btnImport: document.getElementById("btnImport"),
|
||||
btnExport: document.getElementById("btnExport"),
|
||||
btnTheme: document.getElementById("btnTheme"),
|
||||
modal: document.getElementById("modal"),
|
||||
btnClose: document.getElementById("btnClose"),
|
||||
btnCancel: document.getElementById("btnCancel"),
|
||||
form: document.getElementById("form"),
|
||||
id: document.getElementById("id"),
|
||||
title: document.getElementById("title"),
|
||||
url: document.getElementById("url"),
|
||||
description: document.getElementById("description"),
|
||||
tags: document.getElementById("tags"),
|
||||
favorite: document.getElementById("favorite"),
|
||||
file: document.getElementById("file"),
|
||||
toast: document.getElementById("toast"),
|
||||
};
|
||||
|
||||
// NOTE:
|
||||
// 예전에는 links.json을 못 읽는 환경(file:// 등)에서 "내장 기본 목록"으로 조용히 대체했는데,
|
||||
// 그러면 links.json의 순서/내용 변경이 반영되지 않아 혼란이 생깁니다.
|
||||
// 이제는 links.json 로드를 우선하며, 실패 시 경고를 띄우고 빈 목록(또는 localStorage 커스텀)으로 동작합니다.
|
||||
const DEFAULT_LINKS_INLINE = [];
|
||||
|
||||
const state = {
|
||||
baseLinks: [],
|
||||
baseOrder: new Map(),
|
||||
store: loadStore(),
|
||||
query: "",
|
||||
sortKey: "json",
|
||||
onlyFav: false,
|
||||
};
|
||||
|
||||
function nowIso() {
|
||||
return new Date().toISOString();
|
||||
}
|
||||
|
||||
function safeJsonParse(s, fallback) {
|
||||
try {
|
||||
return JSON.parse(s);
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function loadStore() {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const data = raw ? safeJsonParse(raw, null) : null;
|
||||
const store = {
|
||||
overridesById: {},
|
||||
tombstones: [],
|
||||
custom: [],
|
||||
};
|
||||
if (!data || typeof data !== "object") return store;
|
||||
if (data.overridesById && typeof data.overridesById === "object") store.overridesById = data.overridesById;
|
||||
if (Array.isArray(data.tombstones)) store.tombstones = data.tombstones;
|
||||
if (Array.isArray(data.custom)) store.custom = data.custom;
|
||||
return store;
|
||||
}
|
||||
|
||||
function saveStore() {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(state.store));
|
||||
}
|
||||
|
||||
function normalizeUrl(url) {
|
||||
const u = String(url || "").trim();
|
||||
if (!u) return "";
|
||||
if (/^https?:\/\//i.test(u)) return u;
|
||||
return "https://" + u;
|
||||
}
|
||||
|
||||
function normalizeTags(tagsText) {
|
||||
if (!tagsText) return [];
|
||||
return String(tagsText)
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, 12);
|
||||
}
|
||||
|
||||
function getDomain(url) {
|
||||
try {
|
||||
return new URL(url).host;
|
||||
} catch {
|
||||
return url.replace(/^https?:\/\//i, "").split("/")[0] || "";
|
||||
}
|
||||
}
|
||||
|
||||
function faviconUrl(url) {
|
||||
const domainUrl = encodeURIComponent(url);
|
||||
return `https://www.google.com/s2/favicons?domain_url=${domainUrl}&sz=64`;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function idFromUrl(url) {
|
||||
const d = getDomain(url).toLowerCase();
|
||||
const cleaned = d.replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
|
||||
return cleaned || "link";
|
||||
}
|
||||
|
||||
function newId(prefix = "custom") {
|
||||
if (globalThis.crypto && crypto.randomUUID) return `${prefix}-${crypto.randomUUID()}`;
|
||||
return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
||||
}
|
||||
|
||||
function normalizeLink(link) {
|
||||
const url = normalizeUrl(link.url);
|
||||
const id = String(link.id || "").trim() || idFromUrl(url) || newId("link");
|
||||
const title = String(link.title || "").trim() || getDomain(url) || "Link";
|
||||
const description = String(link.description || "").trim();
|
||||
const tags = Array.isArray(link.tags) ? link.tags.map((t) => String(t).trim()).filter(Boolean) : [];
|
||||
const favorite = Boolean(link.favorite);
|
||||
const createdAt = String(link.createdAt || nowIso());
|
||||
const updatedAt = String(link.updatedAt || createdAt);
|
||||
return { id, title, url, description, tags, favorite, createdAt, updatedAt };
|
||||
}
|
||||
|
||||
function getMergedLinks() {
|
||||
const tomb = new Set(state.store.tombstones || []);
|
||||
const overrides = state.store.overridesById || {};
|
||||
|
||||
const byId = new Map();
|
||||
for (const base of state.baseLinks) {
|
||||
if (!base || !base.id) continue;
|
||||
if (tomb.has(base.id)) continue;
|
||||
const o = overrides[base.id];
|
||||
byId.set(base.id, { ...base, ...(o || {}) });
|
||||
}
|
||||
for (const c of state.store.custom || []) {
|
||||
const n = normalizeLink(c);
|
||||
byId.set(n.id, n);
|
||||
}
|
||||
return [...byId.values()];
|
||||
}
|
||||
|
||||
function matchesQuery(link, q) {
|
||||
if (!q) return true;
|
||||
const hay = [
|
||||
link.title,
|
||||
link.url,
|
||||
getDomain(link.url),
|
||||
link.description || "",
|
||||
(link.tags || []).join(" "),
|
||||
]
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
return hay.includes(q);
|
||||
}
|
||||
|
||||
function toTime(s) {
|
||||
const t = Date.parse(String(s || ""));
|
||||
return Number.isFinite(t) ? t : 0;
|
||||
}
|
||||
|
||||
function orderKey(link) {
|
||||
const idx = state.baseOrder.get(link.id);
|
||||
if (typeof idx === "number") return idx;
|
||||
// custom/imported links go after base list, in creation order
|
||||
return 1_000_000 + toTime(link.createdAt);
|
||||
}
|
||||
|
||||
function compareLinks(a, b) {
|
||||
const key = state.sortKey;
|
||||
if (key === "json") {
|
||||
const oa = orderKey(a);
|
||||
const ob = orderKey(b);
|
||||
if (oa !== ob) return oa - ob;
|
||||
return a.title.localeCompare(b.title, "ko");
|
||||
}
|
||||
if (key === "favorite") {
|
||||
if (a.favorite !== b.favorite) return a.favorite ? -1 : 1;
|
||||
// tie-breaker: keep json order
|
||||
const oa = orderKey(a);
|
||||
const ob = orderKey(b);
|
||||
if (oa !== ob) return oa - ob;
|
||||
}
|
||||
if (key === "name") return a.title.localeCompare(b.title, "ko");
|
||||
if (key === "domain") return getDomain(a.url).localeCompare(getDomain(b.url), "en");
|
||||
// recent (default)
|
||||
return String(b.updatedAt).localeCompare(String(a.updatedAt));
|
||||
}
|
||||
|
||||
function render() {
|
||||
const q = state.query.trim().toLowerCase();
|
||||
const all = getMergedLinks();
|
||||
const filtered = all
|
||||
.filter((l) => (state.onlyFav ? l.favorite : true))
|
||||
.filter((l) => matchesQuery(l, q))
|
||||
.sort(compareLinks);
|
||||
|
||||
el.grid.innerHTML = filtered.map(cardHtml).join("");
|
||||
el.empty.hidden = filtered.length !== 0;
|
||||
|
||||
const favCount = all.filter((l) => l.favorite).length;
|
||||
el.meta.textContent = `표시 ${filtered.length}개 · 전체 ${all.length}개 · 즐겨찾기 ${favCount}개`;
|
||||
el.subtitle.textContent = all.length ? `링크 ${all.length}개` : "개인 링크 관리";
|
||||
}
|
||||
|
||||
function cardHtml(link) {
|
||||
const domain = escapeHtml(getDomain(link.url));
|
||||
const title = escapeHtml(link.title);
|
||||
const desc = escapeHtml(link.description || "");
|
||||
const url = escapeHtml(link.url);
|
||||
const starClass = link.favorite ? "star on" : "star";
|
||||
const tags = (link.tags || []).slice(0, 8);
|
||||
const tagHtml = [
|
||||
link.favorite ? `<span class="tag fav">★ 즐겨찾기</span>` : "",
|
||||
...tags.map((t) => `<span class="tag">#${escapeHtml(t)}</span>`),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join("");
|
||||
|
||||
const letter = escapeHtml((link.title || domain || "L").trim().slice(0, 1).toUpperCase());
|
||||
|
||||
return `
|
||||
<article class="card" data-id="${escapeHtml(link.id)}">
|
||||
<div class="card-head">
|
||||
<div class="card-title">
|
||||
<div class="favicon" aria-hidden="true">
|
||||
<img src="${faviconUrl(link.url)}" alt="" onerror="this.remove(); this.parentNode.insertAdjacentHTML('beforeend','<div class="letter">${letter}</div>');" />
|
||||
</div>
|
||||
<div class="title-wrap">
|
||||
<div class="title" title="${title}">${title}</div>
|
||||
<div class="domain" title="${domain}">${domain}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="icon-btn" type="button" data-act="fav" title="즐겨찾기">
|
||||
<span class="${starClass}" aria-hidden="true">★</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card-desc">${desc || " "}</div>
|
||||
<div class="tags">${tagHtml || ""}</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<a class="btn mini" href="${url}" target="_blank" rel="noopener noreferrer" data-act="open">열기</a>
|
||||
<button class="btn mini" type="button" data-act="copy">URL 복사</button>
|
||||
<button class="btn mini" type="button" data-act="edit">편집</button>
|
||||
<button class="btn mini mini-danger" type="button" data-act="del">삭제</button>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
|
||||
function openModal(mode, link) {
|
||||
el.modal.hidden = false;
|
||||
document.body.style.overflow = "hidden";
|
||||
const isEdit = mode === "edit";
|
||||
|
||||
document.getElementById("modalTitle").textContent = isEdit ? "링크 편집" : "링크 추가";
|
||||
el.id.value = isEdit ? link.id : "";
|
||||
el.title.value = isEdit ? link.title : "";
|
||||
el.url.value = isEdit ? link.url : "";
|
||||
el.description.value = isEdit ? link.description || "" : "";
|
||||
el.tags.value = isEdit ? (link.tags || []).join(", ") : "";
|
||||
el.favorite.checked = isEdit ? Boolean(link.favorite) : false;
|
||||
|
||||
setTimeout(() => el.title.focus(), 0);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
el.modal.hidden = true;
|
||||
document.body.style.overflow = "";
|
||||
el.form.reset();
|
||||
el.id.value = "";
|
||||
}
|
||||
|
||||
function getLinkById(id) {
|
||||
return getMergedLinks().find((l) => l.id === id) || null;
|
||||
}
|
||||
|
||||
function isBaseId(id) {
|
||||
return state.baseLinks.some((l) => l.id === id);
|
||||
}
|
||||
|
||||
function setOverride(id, patch) {
|
||||
state.store.overridesById[id] = { ...(state.store.overridesById[id] || {}), ...patch };
|
||||
saveStore();
|
||||
}
|
||||
|
||||
function removeOverride(id) {
|
||||
if (state.store.overridesById && state.store.overridesById[id]) {
|
||||
delete state.store.overridesById[id];
|
||||
}
|
||||
saveStore();
|
||||
}
|
||||
|
||||
function toast(msg) {
|
||||
el.toast.textContent = msg;
|
||||
el.toast.hidden = false;
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => {
|
||||
el.toast.hidden = true;
|
||||
}, 2400);
|
||||
}
|
||||
|
||||
async function copyText(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast("복사했습니다.");
|
||||
} catch {
|
||||
// fallback
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.setAttribute("readonly", "readonly");
|
||||
ta.style.position = "fixed";
|
||||
ta.style.left = "-9999px";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand("copy");
|
||||
ta.remove();
|
||||
toast("복사했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
function upsertCustom(link) {
|
||||
const n = normalizeLink(link);
|
||||
const idx = state.store.custom.findIndex((c) => c && c.id === n.id);
|
||||
if (idx >= 0) state.store.custom[idx] = n;
|
||||
else state.store.custom.push(n);
|
||||
saveStore();
|
||||
}
|
||||
|
||||
function deleteLink(id) {
|
||||
if (isBaseId(id)) {
|
||||
const s = new Set(state.store.tombstones || []);
|
||||
s.add(id);
|
||||
state.store.tombstones = [...s];
|
||||
removeOverride(id);
|
||||
saveStore();
|
||||
toast("기본 링크를 숨겼습니다.");
|
||||
return;
|
||||
}
|
||||
const before = state.store.custom.length;
|
||||
state.store.custom = (state.store.custom || []).filter((c) => c && c.id !== id);
|
||||
saveStore();
|
||||
if (state.store.custom.length !== before) toast("삭제했습니다.");
|
||||
}
|
||||
|
||||
function toggleFavorite(id) {
|
||||
const link = getLinkById(id);
|
||||
if (!link) return;
|
||||
const next = !link.favorite;
|
||||
if (isBaseId(id)) {
|
||||
setOverride(id, { favorite: next, updatedAt: nowIso() });
|
||||
} else {
|
||||
upsertCustom({ ...link, favorite: next, updatedAt: nowIso() });
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
function editLink(id) {
|
||||
const link = getLinkById(id);
|
||||
if (!link) return;
|
||||
openModal("edit", link);
|
||||
}
|
||||
|
||||
async function loadBaseLinks() {
|
||||
// 1) index.html 내부 내장 데이터(서버 없이도 동작)
|
||||
const dataEl = document.getElementById("linksData");
|
||||
if (dataEl && dataEl.textContent) {
|
||||
const parsed = safeJsonParse(dataEl.textContent, null);
|
||||
if (Array.isArray(parsed)) return parsed.map(normalizeLink);
|
||||
}
|
||||
|
||||
// 2) 동일 디렉토리의 links.json (서버 환경에서 권장)
|
||||
const candidates = [
|
||||
new URL("./links.json", document.baseURI).toString(),
|
||||
new URL("links.json", document.baseURI).toString(),
|
||||
];
|
||||
|
||||
for (const url of candidates) {
|
||||
try {
|
||||
const res = await fetch(url, { cache: "no-store" });
|
||||
if (!res.ok) continue;
|
||||
const data = await res.json();
|
||||
if (!Array.isArray(data)) continue;
|
||||
return data.map(normalizeLink);
|
||||
} catch {
|
||||
// try next
|
||||
}
|
||||
}
|
||||
|
||||
const hint =
|
||||
location.protocol === "file:"
|
||||
? "기본 링크 데이터가 없습니다. index.html의 linksData를 확인하세요."
|
||||
: "links.json을 불러오지 못했습니다. 배포 경로에 links.json이 있는지 확인하세요.";
|
||||
toast(hint);
|
||||
return DEFAULT_LINKS_INLINE.map(normalizeLink);
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
const t = theme === "light" ? "light" : "dark";
|
||||
document.documentElement.setAttribute("data-theme", t);
|
||||
el.btnTheme.setAttribute("aria-pressed", t === "dark" ? "true" : "false");
|
||||
localStorage.setItem(THEME_KEY, t);
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved === "light" || saved === "dark") return applyTheme(saved);
|
||||
const prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
|
||||
applyTheme(prefersLight ? "light" : "dark");
|
||||
}
|
||||
|
||||
function exportJson() {
|
||||
const data = getMergedLinks().sort((a, b) => a.title.localeCompare(b.title, "ko"));
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json;charset=utf-8" });
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = `links-export-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(() => {
|
||||
URL.revokeObjectURL(a.href);
|
||||
a.remove();
|
||||
}, 0);
|
||||
toast("내보내기 파일을 생성했습니다.");
|
||||
}
|
||||
|
||||
function importJsonText(text) {
|
||||
const parsed = safeJsonParse(text, null);
|
||||
if (!parsed) throw new Error("JSON 파싱 실패");
|
||||
|
||||
const list = Array.isArray(parsed) ? parsed : Array.isArray(parsed.links) ? parsed.links : null;
|
||||
if (!list) throw new Error("JSON 형식이 올바르지 않습니다. (배열 또는 {links:[...]} )");
|
||||
|
||||
const merged = getMergedLinks();
|
||||
const used = new Set(merged.map((l) => l.id));
|
||||
|
||||
let added = 0;
|
||||
for (const item of list) {
|
||||
if (!item) continue;
|
||||
const n0 = normalizeLink(item);
|
||||
let n = n0;
|
||||
if (used.has(n.id)) {
|
||||
n = { ...n, id: newId("import"), createdAt: nowIso(), updatedAt: nowIso() };
|
||||
}
|
||||
used.add(n.id);
|
||||
// 가져오기는 custom로 추가(기본과 충돌 방지)
|
||||
state.store.custom.push(n);
|
||||
added++;
|
||||
}
|
||||
saveStore();
|
||||
toast(`가져오기 완료: ${added}개`);
|
||||
}
|
||||
|
||||
function onGridClick(e) {
|
||||
const btn = e.target.closest("[data-act]");
|
||||
if (!btn) return;
|
||||
const card = e.target.closest(".card");
|
||||
if (!card) return;
|
||||
const id = card.getAttribute("data-id");
|
||||
if (!id) return;
|
||||
|
||||
const act = btn.getAttribute("data-act");
|
||||
if (act === "fav") {
|
||||
toggleFavorite(id);
|
||||
return;
|
||||
}
|
||||
if (act === "copy") {
|
||||
const link = getLinkById(id);
|
||||
if (link) copyText(link.url);
|
||||
return;
|
||||
}
|
||||
if (act === "edit") {
|
||||
editLink(id);
|
||||
return;
|
||||
}
|
||||
if (act === "del") {
|
||||
const link = getLinkById(id);
|
||||
const name = link ? link.title : id;
|
||||
if (confirm(`삭제할까요?\n\n- ${name}`)) {
|
||||
deleteLink(id);
|
||||
render();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onFormSubmit(e) {
|
||||
e.preventDefault();
|
||||
const isEdit = Boolean(el.id.value);
|
||||
|
||||
const title = String(el.title.value || "").trim();
|
||||
const url = normalizeUrl(el.url.value);
|
||||
if (!title) return toast("제목을 입력하세요.");
|
||||
if (!url) return toast("URL을 입력하세요.");
|
||||
|
||||
let parsed;
|
||||
try {
|
||||
parsed = new URL(url);
|
||||
} catch {
|
||||
return toast("URL 형식이 올바르지 않습니다.");
|
||||
}
|
||||
if (!/^https?:$/.test(parsed.protocol)) return toast("http/https URL만 지원합니다.");
|
||||
|
||||
const description = String(el.description.value || "").trim();
|
||||
const tags = normalizeTags(el.tags.value);
|
||||
const favorite = Boolean(el.favorite.checked);
|
||||
|
||||
if (isEdit) {
|
||||
const id = el.id.value;
|
||||
const current = getLinkById(id);
|
||||
if (!current) {
|
||||
closeModal();
|
||||
toast("편집 대상이 없습니다.");
|
||||
return;
|
||||
}
|
||||
const patch = {
|
||||
title,
|
||||
url,
|
||||
description,
|
||||
tags,
|
||||
favorite,
|
||||
updatedAt: nowIso(),
|
||||
};
|
||||
if (isBaseId(id)) setOverride(id, patch);
|
||||
else upsertCustom({ ...current, ...patch });
|
||||
closeModal();
|
||||
render();
|
||||
toast("저장했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const id = newId("custom");
|
||||
upsertCustom({
|
||||
id,
|
||||
title,
|
||||
url,
|
||||
description,
|
||||
tags,
|
||||
favorite,
|
||||
createdAt: nowIso(),
|
||||
updatedAt: nowIso(),
|
||||
});
|
||||
closeModal();
|
||||
render();
|
||||
toast("추가했습니다.");
|
||||
}
|
||||
|
||||
function wire() {
|
||||
el.q.addEventListener("input", () => {
|
||||
state.query = el.q.value || "";
|
||||
render();
|
||||
});
|
||||
|
||||
el.sort.addEventListener("change", () => {
|
||||
state.sortKey = el.sort.value || "json";
|
||||
render();
|
||||
});
|
||||
|
||||
el.onlyFav.addEventListener("change", () => {
|
||||
state.onlyFav = Boolean(el.onlyFav.checked);
|
||||
render();
|
||||
});
|
||||
|
||||
el.grid.addEventListener("click", onGridClick);
|
||||
|
||||
el.btnAdd.addEventListener("click", () => openModal("add", null));
|
||||
el.btnClose.addEventListener("click", closeModal);
|
||||
el.btnCancel.addEventListener("click", closeModal);
|
||||
el.modal.addEventListener("click", (e) => {
|
||||
const close = e.target && e.target.getAttribute && e.target.getAttribute("data-close");
|
||||
if (close) closeModal();
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && !el.modal.hidden) closeModal();
|
||||
});
|
||||
|
||||
el.form.addEventListener("submit", onFormSubmit);
|
||||
|
||||
el.btnExport.addEventListener("click", exportJson);
|
||||
el.btnImport.addEventListener("click", () => el.file.click());
|
||||
el.file.addEventListener("change", async () => {
|
||||
const f = el.file.files && el.file.files[0];
|
||||
el.file.value = "";
|
||||
if (!f) return;
|
||||
try {
|
||||
const text = await f.text();
|
||||
importJsonText(text);
|
||||
render();
|
||||
} catch (err) {
|
||||
toast(String(err && err.message ? err.message : "가져오기 실패"));
|
||||
}
|
||||
});
|
||||
|
||||
el.btnTheme.addEventListener("click", () => {
|
||||
const cur = document.documentElement.getAttribute("data-theme") || "dark";
|
||||
applyTheme(cur === "dark" ? "light" : "dark");
|
||||
});
|
||||
}
|
||||
|
||||
async function main() {
|
||||
initTheme();
|
||||
wire();
|
||||
state.baseLinks = await loadBaseLinks();
|
||||
state.baseOrder = new Map(state.baseLinks.map((l, i) => [l.id, i]));
|
||||
el.sort.value = state.sortKey;
|
||||
render();
|
||||
}
|
||||
|
||||
main().catch(() => {
|
||||
toast("초기화에 실패했습니다.");
|
||||
});
|
||||
})();
|
||||
|
||||
609
styles.css
Normal file
609
styles.css
Normal file
@@ -0,0 +1,609 @@
|
||||
:root {
|
||||
--bg: #0b1020;
|
||||
--panel: rgba(255, 255, 255, 0.06);
|
||||
--panel2: rgba(255, 255, 255, 0.09);
|
||||
--text: rgba(255, 255, 255, 0.92);
|
||||
--muted: rgba(255, 255, 255, 0.72);
|
||||
--muted2: rgba(255, 255, 255, 0.58);
|
||||
--border: rgba(255, 255, 255, 0.12);
|
||||
--accent: #7c3aed;
|
||||
--accent2: #22c55e;
|
||||
--danger: #ef4444;
|
||||
--shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
|
||||
--radius: 16px;
|
||||
--radius2: 12px;
|
||||
--max: 1120px;
|
||||
--focus: 0 0 0 3px rgba(124, 58, 237, 0.35);
|
||||
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
|
||||
"Segoe UI Emoji";
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
--bg: #f7f7fb;
|
||||
--panel: rgba(0, 0, 0, 0.04);
|
||||
--panel2: rgba(0, 0, 0, 0.06);
|
||||
--text: rgba(0, 0, 0, 0.9);
|
||||
--muted: rgba(0, 0, 0, 0.66);
|
||||
--muted2: rgba(0, 0, 0, 0.52);
|
||||
--border: rgba(0, 0, 0, 0.12);
|
||||
--shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
|
||||
--focus: 0 0 0 3px rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--sans);
|
||||
color: var(--text);
|
||||
background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 58, 237, 0.35), transparent 60%),
|
||||
radial-gradient(900px 500px at 90% 10%, rgba(34, 197, 94, 0.22), transparent 55%),
|
||||
radial-gradient(800px 500px at 40% 110%, rgba(59, 130, 246, 0.16), transparent 60%), var(--bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(var(--max), calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 10px 12px;
|
||||
background: var(--panel2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
outline: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(14px);
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .topbar {
|
||||
background: linear-gradient(to bottom, rgba(247, 247, 251, 0.92), rgba(247, 247, 251, 0));
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.topbar .wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(34, 197, 94, 0.7));
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: 0 14px 40px rgba(124, 58, 237, 0.22);
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--muted2);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn {
|
||||
appearance: none;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--panel2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus);
|
||||
}
|
||||
|
||||
.btn-ico {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
font-weight: 900;
|
||||
border-radius: 6px;
|
||||
background: rgba(124, 58, 237, 0.22);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .btn-ico {
|
||||
color: rgba(0, 0, 0, 0.82);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(99, 102, 241, 0.86));
|
||||
border-color: rgba(124, 58, 237, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(99, 102, 241, 0.92));
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 18px 0 48px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.6fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.controls {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
.meta {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.topbar .wrap {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.brand {
|
||||
min-width: 0;
|
||||
}
|
||||
.controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
color: var(--muted2);
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .input,
|
||||
html[data-theme="light"] .select {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.select:focus {
|
||||
box-shadow: var(--focus);
|
||||
border-color: rgba(124, 58, 237, 0.55);
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted2);
|
||||
}
|
||||
|
||||
.check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
padding: 10px 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.check input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
justify-self: end;
|
||||
color: var(--muted2);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
|
||||
transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.card:focus-within {
|
||||
box-shadow: var(--shadow), var(--focus);
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.favicon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.favicon img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.favicon .letter {
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .favicon .letter {
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.domain {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
color: var(--muted2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-top: 10px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.tag.fav {
|
||||
border-color: rgba(34, 197, 94, 0.35);
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
color: rgba(180, 255, 210, 0.9);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .tag.fav {
|
||||
color: rgba(0, 120, 70, 0.92);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mini {
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mini-danger {
|
||||
border-color: rgba(239, 68, 68, 0.35);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: rgba(255, 200, 200, 0.92);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .mini-danger {
|
||||
color: rgba(140, 20, 20, 0.9);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.icon-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus);
|
||||
}
|
||||
|
||||
.star {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.star.on {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 14px;
|
||||
border: 1px dashed var(--border);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-weight: 760;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
color: var(--muted2);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.modal[hidden],
|
||||
.toast[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.52);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
position: relative;
|
||||
width: min(560px, calc(100% - 32px));
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(15, 18, 33, 0.92);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .modal-card {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 14px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 14px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 300;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: var(--shadow);
|
||||
max-width: min(520px, calc(100% - 32px));
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .toast {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: rgba(0, 0, 0, 0.86);
|
||||
}
|
||||
|
||||
.noscript {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: var(--panel2);
|
||||
padding: 12px 14px;
|
||||
color: var(--muted);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user