mattuy/text-mosaic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mattuy/text-mosaic:main
Branches Tags
mattuy/text-mosaic:main
..
compare: mattuy/text-mosaic:2f058981a677a7d4b005cd50c5f27a30725dad29
Branches Tags
mattuy/text-mosaic:main

13 Commits
main .. 2f058981a6

Author SHA1 Message Date
mattuy 2f058981a6 Merge pull request 'fix: 排除破坏行框的组合字符' (#5) from fix/stable-unicode-layout into main 2026-07-25 15:22:40 +00:00
necobot 03bbb76a2c fix: 排除破坏行框的组合字符 2026-07-25 23:11:25 +08:00
mattuy 48c17799bc Merge pull request 'feat: 扩大体量和显影参数范围' (#4) from feat/wide-volume-range into main 2026-07-25 09:04:25 +00:00
necobot 143823f953 fix: 让显影参数覆盖完整范围 2026-07-25 16:41:47 +08:00
necobot 9650d8a243 feat: 扩大体量参数范围 2026-07-25 16:40:44 +08:00
mattuy bd6f3daa73 Merge pull request 'fix: 移除输入框黄色焦点圈' (#3) from fix/textarea-focus into main 2026-07-25 08:38:00 +00:00
necobot 4655e56820 fix: 移除输入框黄色焦点圈 2026-07-25 16:36:52 +08:00
mattuy 73f094b72d add lock 2026-07-25 16:35:19 +08:00
mattuy 9efb5ad3ac Merge pull request 'fix: 避免顶部文字重叠' (#2) from fix/header-overlap into main 2026-07-25 08:33:52 +00:00
necobot fe11c9a1cc fix: 避免顶部文字重叠 2026-07-25 16:33:03 +08:00
mattuy da9b354e4c Merge pull request 'feat: 初始化文字马赛克生成器' (#1) from feat/initial-app into main 
Reviewed-on: #1
 2026-07-25 08:27:17 +00:00
necobot c580d069b1 feat: 初始化文字马赛克生成器 2026-07-25 16:19:26 +08:00
mattuy 0001f72635 Initial commit 2026-07-25 07:58:15 +00:00
5 changed files with 28 additions and 130 deletions
Expand all files Collapse all files
.dockerignore
-5
View File
@@ -1,5 +0,0 @@
.git
.worktrees
dist
node_modules
*.log
Dockerfile
-16
View File
@@ -1,16 +0,0 @@
FROM oven/bun:1.3.11-alpine AS build
WORKDIR /app
COPY package.json index.html tsconfig.json ./
COPY scripts ./scripts
COPY src ./src
RUN bun run build
FROM nginxinc/nginx-unprivileged:1.29.4-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 8080
index.html
+1 -10
View File
@@ -7,16 +7,7 @@
name="description" name="description"
content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。" content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。"
/> />
<meta <meta name="theme-color" content="#e9e7dd" />
name="theme-color"
content="#e9e7dd"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#121310"
media="(prefers-color-scheme: dark)"
/>
<title>文字马赛克</title> <title>文字马赛克</title>
</head> </head>
<body> <body>
nginx.conf
-28
View File
@@ -1,28 +0,0 @@
server {
listen 8080;
server_name _;
absolute_redirect off;
port_in_redirect off;
root /usr/share/nginx/html;
index index.html;
location = /healthz {
access_log off;
default_type text/plain;
return 200 "ok\n";
}
location = /index.html {
add_header Cache-Control "no-cache, must-revalidate";
}
location ~* \.(?:css|js)$ {
try_files $uri =404;
add_header Cache-Control "public, max-age=31536000, immutable";
}
location / {
try_files $uri $uri/ /index.html;
}
}
src/style.css
+27 -71
View File
@@ -1,7 +1,6 @@
:root { :root {
color: #171815; color: #171815;
background: #e9e7dd; background: #e9e7dd;
color-scheme: light dark;
font-family: font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif; sans-serif;
@@ -12,49 +11,6 @@
--acid: #d8ff52; --acid: #d8ff52;
--muted: #6b6b63; --muted: #6b6b63;
--line: rgba(23, 24, 21, 0.24); --line: rgba(23, 24, 21, 0.24);
--grid-row: rgba(23, 24, 21, 0.035);
--grid-column: rgba(23, 24, 21, 0.025);
--panel: rgba(244, 242, 234, 0.76);
--panel-soft: rgba(244, 242, 234, 0.7);
--shadow: var(--ink);
--focus-inset: rgba(23, 24, 21, 0.28);
--placeholder: #9b9a91;
--output: #171815;
--output-ink: #efeee6;
--output-muted: #9c9d93;
--output-empty: #77786f;
--output-line: rgba(255, 255, 255, 0.2);
--output-glow: rgba(216, 255, 82, 0.08);
--output-hover: #efeee6;
--output-hover-ink: #171815;
--acid-hover: #efffb4;
--on-acid: #171815;
--selected: var(--ink);
--selected-ink: var(--acid);
}
@media (prefers-color-scheme: dark) {
:root {
color: #efeee6;
background: #121310;
--ink: #efeee6;
--paper: #121310;
--acid: #cffa4c;
--muted: #a2a39a;
--line: rgba(239, 238, 230, 0.23);
--grid-row: rgba(239, 238, 230, 0.04);
--grid-column: rgba(239, 238, 230, 0.03);
--panel: rgba(29, 30, 26, 0.82);
--panel-soft: rgba(29, 30, 26, 0.76);
--shadow: #050604;
--focus-inset: rgba(239, 238, 230, 0.3);
--placeholder: #8e8f86;
--output: #090a08;
--output-glow: rgba(207, 250, 76, 0.11);
--acid-hover: #e7ffa0;
--selected: var(--acid);
--selected-ink: var(--on-acid);
}
} }
* { * {
@@ -72,8 +28,8 @@ body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background: background:
linear-gradient(var(--grid-row) 1px, transparent 1px), linear-gradient(rgba(23, 24, 21, 0.035) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-column) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 24, 21, 0.025) 1px, transparent 1px),
var(--paper); var(--paper);
background-size: 100% 48px, 48px 100%, auto; background-size: 100% 48px, 48px 100%, auto;
} }
@@ -96,7 +52,7 @@ input:focus-visible {
textarea:focus-visible { textarea:focus-visible {
outline: none; outline: none;
box-shadow: inset 0 0 0 1px var(--focus-inset); box-shadow: inset 0 0 0 1px rgba(23, 24, 21, 0.28);
} }
.page-shell { .page-shell {
@@ -161,7 +117,7 @@ textarea:focus-visible {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid var(--ink); border: 1px solid var(--ink);
box-shadow: 9px 9px 0 var(--shadow); box-shadow: 9px 9px 0 var(--ink);
} }
.panel { .panel {
@@ -171,16 +127,16 @@ textarea:focus-visible {
.panel--input { .panel--input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--panel); background: rgba(244, 242, 234, 0.76);
} }
.panel--output { .panel--output {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: background:
radial-gradient(circle at 15% 18%, var(--output-glow), transparent 25%), radial-gradient(circle at 15% 18%, rgba(216, 255, 82, 0.08), transparent 25%),
var(--output); var(--ink);
color: var(--output-ink); color: #efeee6;
border-left: 1px solid var(--ink); border-left: 1px solid var(--ink);
} }
@@ -200,7 +156,7 @@ textarea:focus-visible {
} }
.panel__heading--dark { .panel__heading--dark {
border-color: var(--output-line); border-color: rgba(255, 255, 255, 0.2);
} }
.panel__heading h2, .panel__heading h2,
@@ -219,7 +175,7 @@ textarea:focus-visible {
} }
.panel--output .panel__number { .panel--output .panel__number {
color: var(--output-muted); color: #9c9d93;
} }
.counter { .counter {
@@ -229,7 +185,7 @@ textarea:focus-visible {
} }
.panel--output .counter { .panel--output .counter {
color: var(--output-muted); color: #9c9d93;
} }
textarea { textarea {
@@ -248,7 +204,7 @@ textarea {
} }
textarea::placeholder { textarea::placeholder {
color: var(--placeholder); color: #9b9a91;
} }
.mosaic-output { .mosaic-output {
@@ -265,13 +221,13 @@ textarea::placeholder {
} }
.mosaic-output--empty { .mosaic-output--empty {
color: var(--output-empty); color: #77786f;
} }
.output-actions { .output-actions {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--output-line); border-top: 1px solid rgba(255, 255, 255, 0.2);
} }
.button { .button {
@@ -288,22 +244,22 @@ textarea::placeholder {
.button--light { .button--light {
background: var(--acid); background: var(--acid);
color: var(--on-acid); color: var(--ink);
} }
.button--light:hover { .button--light:hover {
background: var(--acid-hover); background: #efffb4;
} }
.button--outline { .button--outline {
color: var(--output-ink); color: #efeee6;
background: transparent; background: transparent;
border-left: 1px solid var(--output-line); border-left: 1px solid rgba(255, 255, 255, 0.2);
} }
.button--outline:hover { .button--outline:hover {
color: var(--output-hover-ink); color: var(--ink);
background: var(--output-hover); background: #efeee6;
} }
.control-deck { .control-deck {
@@ -439,7 +395,7 @@ input[type="range"]::-moz-range-thumb {
min-height: 110px; min-height: 110px;
margin-top: 24px; margin-top: 24px;
padding: 24px; padding: 24px;
background: var(--panel-soft); background: rgba(244, 242, 234, 0.7);
border: 1px solid var(--ink); border: 1px solid var(--ink);
} }
@@ -463,9 +419,9 @@ input[type="range"]::-moz-range-thumb {
} }
.keyword-token--selected { .keyword-token--selected {
color: var(--selected-ink); color: var(--acid);
background: var(--selected); background: var(--ink);
border-color: var(--selected); border-color: var(--ink);
} }
.keyword-list__empty { .keyword-list__empty {
@@ -496,10 +452,10 @@ footer p {
bottom: 24px; bottom: 24px;
z-index: 10; z-index: 10;
padding: 13px 18px; padding: 13px 18px;
color: var(--on-acid); color: var(--ink);
background: var(--acid); background: var(--acid);
border: 1px solid var(--ink); border: 1px solid var(--ink);
box-shadow: 5px 5px 0 var(--shadow); box-shadow: 5px 5px 0 var(--ink);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
opacity: 0; opacity: 0;
@@ -542,7 +498,7 @@ footer p {
.workspace { .workspace {
grid-template-columns: 1fr; grid-template-columns: 1fr;
box-shadow: 6px 6px 0 var(--shadow); box-shadow: 6px 6px 0 var(--ink);
} }
.panel { .panel {