Skip to content

Commit 61eec72

Browse files
igapyonigapyon
authored
Merge pull request #6 from igapyon/devel
develの成果をmainに反映
2 parents b484540 + a562d82 commit 61eec72

5 files changed

Lines changed: 314 additions & 10 deletions

File tree

‎index.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
7+
<meta http-equiv="Pragma" content="no-cache" />
8+
<meta http-equiv="Expires" content="0" />
9+
<title>xlsx2md</title>
10+
<style>
11+
:root {
12+
--bg: #f3efe6;
13+
--surface: #fffdf8;
14+
--text: #1f1d18;
15+
--muted: #6b655b;
16+
--primary: #8f3b1b;
17+
--on-primary: #fffaf6;
18+
--secondary-bg: #efe2d8;
19+
--secondary-text: #4f4037;
20+
--outline: #dfd2c4;
21+
}
22+
* { box-sizing: border-box; }
23+
body {
24+
margin: 0;
25+
font-family: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Segoe UI", sans-serif;
26+
background:
27+
radial-gradient(circle at top left, rgba(143, 59, 27, 0.10), transparent 28%),
28+
linear-gradient(180deg, #f7f2ea 0%, var(--bg) 100%);
29+
color: var(--text);
30+
min-height: 100vh;
31+
display: grid;
32+
place-items: center;
33+
padding: 24px;
34+
}
35+
.card {
36+
width: min(760px, 100%);
37+
background: var(--surface);
38+
border: 1px solid var(--outline);
39+
border-radius: 22px;
40+
padding: 30px;
41+
box-shadow: 0 16px 40px rgba(55, 39, 24, 0.10);
42+
}
43+
h1 {
44+
margin: 0 0 12px;
45+
font-size: clamp(2rem, 5vw, 2.8rem);
46+
line-height: 1.1;
47+
letter-spacing: -0.02em;
48+
}
49+
h2 {
50+
margin: 0 0 10px;
51+
font-size: 1.2rem;
52+
line-height: 1.25;
53+
}
54+
p {
55+
margin: 0 0 14px;
56+
color: var(--muted);
57+
line-height: 1.75;
58+
}
59+
ul {
60+
margin: 0 0 16px;
61+
padding-left: 1.2rem;
62+
color: var(--muted);
63+
line-height: 1.65;
64+
}
65+
.eyebrow {
66+
display: inline-block;
67+
margin-bottom: 12px;
68+
padding: 0.3rem 0.65rem;
69+
border-radius: 999px;
70+
background: #f4e5d9;
71+
color: #7b3d21;
72+
font-size: 0.82rem;
73+
font-weight: 700;
74+
letter-spacing: 0.04em;
75+
text-transform: uppercase;
76+
}
77+
.lead {
78+
font-size: 1.02rem;
79+
color: #4f4a40;
80+
}
81+
.link-row {
82+
display: flex;
83+
flex-wrap: wrap;
84+
gap: 10px;
85+
margin-top: 8px;
86+
}
87+
.link-btn,
88+
.link-btn-secondary {
89+
display: inline-block;
90+
text-decoration: none;
91+
padding: 0.72rem 1.2rem;
92+
border-radius: 999px;
93+
font-weight: 700;
94+
transition: transform 120ms ease, box-shadow 120ms ease;
95+
}
96+
.link-btn {
97+
background: var(--primary);
98+
color: var(--on-primary);
99+
box-shadow: 0 10px 24px rgba(143, 59, 27, 0.24);
100+
}
101+
.link-btn-secondary {
102+
background: var(--secondary-bg);
103+
color: var(--secondary-text);
104+
border: 1px solid #d8c2b4;
105+
}
106+
.link-btn:hover,
107+
.link-btn-secondary:hover {
108+
transform: translateY(-1px);
109+
}
110+
.divider {
111+
border: 0;
112+
border-top: 1px solid var(--outline);
113+
margin: 22px 0;
114+
}
115+
.sub {
116+
margin-top: 14px;
117+
font-size: 0.9rem;
118+
color: var(--muted);
119+
}
120+
.lang-block:last-child p:last-child {
121+
margin-bottom: 0;
122+
}
123+
</style>
124+
</head>
125+
<body>
126+
<main class="card">
127+
<div class="eyebrow">Local Browser Tool</div>
128+
<h1>xlsx2md</h1>
129+
<p class="lead">
130+
Excel (`.xlsx`) をローカルで読み込み、Markdown へ変換するブラウザベースのツールです。
131+
</p>
132+
133+
<section class="lang-block" aria-label="English">
134+
<h2>English</h2>
135+
<p>
136+
xlsx2md is a browser-based converter that reads Excel (`.xlsx`) files locally and turns them into Markdown.
137+
</p>
138+
<ul>
139+
<li>Runs in the browser.</li>
140+
<li>Converts all sheets automatically.</li>
141+
<li>Supports display / raw / both output modes.</li>
142+
<li>Includes analysis-oriented output such as tables, formulas, charts, and shapes.</li>
143+
</ul>
144+
<div class="link-row">
145+
<a class="link-btn" href="./xlsx2md.html?v=202603190000">Open xlsx2md</a>
146+
<a class="link-btn-secondary" href="https://github.com/igapyon/xlsx2md" target="_blank" rel="noopener noreferrer">GitHub</a>
147+
</div>
148+
</section>
149+
150+
<hr class="divider" />
151+
152+
<section class="lang-block" aria-label="日本語">
153+
<h2>日本語</h2>
154+
<p>
155+
xlsx2md は、Excel (`.xlsx`) をローカルで読み込み、Markdown へ変換するブラウザベースのツールです。
156+
</p>
157+
<ul>
158+
<li>ブラウザ内で動作します。</li>
159+
<li>全シートを自動で変換します。</li>
160+
<li>`display` / `raw` / `both` の出力モードを持ちます。</li>
161+
<li>表、数式、グラフ、図形などの解析結果を Markdown に出力します。</li>
162+
</ul>
163+
<div class="link-row">
164+
<a class="link-btn" href="./xlsx2md.html?v=202603190000">xlsx2md を開く</a>
165+
<a class="link-btn-secondary" href="https://github.com/igapyon/xlsx2md" target="_blank" rel="noopener noreferrer">GitHub</a>
166+
</div>
167+
</section>
168+
</main>
169+
170+
<script>
171+
(() => {
172+
const selector = 'a[href^="./xlsx2md.html"]';
173+
const buildVersionStamp = () => {
174+
const d = new Date();
175+
return (
176+
d.getFullYear().toString() +
177+
String(d.getMonth() + 1).padStart(2, "0") +
178+
String(d.getDate()).padStart(2, "0") +
179+
String(d.getHours()).padStart(2, "0") +
180+
String(d.getMinutes()).padStart(2, "0")
181+
);
182+
};
183+
const stampAndGo = (anchor) => {
184+
const u = new URL(anchor.getAttribute("href"), location.href);
185+
u.searchParams.set("v", buildVersionStamp());
186+
anchor.setAttribute("href", u.pathname + u.search);
187+
};
188+
document.addEventListener("click", (ev) => {
189+
const a = ev.target.closest(selector);
190+
if (!a) return;
191+
stampAndGo(a);
192+
}, true);
193+
document.addEventListener("auxclick", (ev) => {
194+
if (ev.button !== 1) return;
195+
const a = ev.target.closest(selector);
196+
if (!a) return;
197+
stampAndGo(a);
198+
}, true);
199+
})();
200+
</script>
201+
</body>
202+
</html>

‎lht-cmn/js/components.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1524,10 +1524,13 @@ class LhtPageHero extends HTMLElement {
15241524
titleMain.appendChild(help);
15251525
}
15261526

1527-
if (actionHref && actionLabel) {
1527+
if (actionHref && (actionLabel || actionIconId)) {
15281528
const actionLink = document.createElement("a");
15291529
actionLink.href = actionHref;
15301530
actionLink.className = "ms-hero-link";
1531+
if (!actionLabel) {
1532+
actionLink.classList.add("ms-hero-link--icon-only");
1533+
}
15311534
actionLink.target = "_blank";
15321535
actionLink.rel = "noopener noreferrer";
15331536
if (actionAriaLabel) {
@@ -1545,9 +1548,11 @@ class LhtPageHero extends HTMLElement {
15451548
iconSvg.appendChild(useNode);
15461549
actionLink.appendChild(iconSvg);
15471550
}
1548-
const labelNode = document.createElement("span");
1549-
labelNode.textContent = actionLabel;
1550-
actionLink.appendChild(labelNode);
1551+
if (actionLabel) {
1552+
const labelNode = document.createElement("span");
1553+
labelNode.textContent = actionLabel;
1554+
actionLink.appendChild(labelNode);
1555+
}
15511556
titleMain.appendChild(actionLink);
15521557
}
15531558

‎src/xlsx2md/css/app.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,48 @@
1212
margin: 0 auto;
1313
}
1414

15+
.md-icons {
16+
position: absolute;
17+
width: 0;
18+
height: 0;
19+
overflow: hidden;
20+
}
21+
1522
.md-surface-card {
1623
padding: 28px;
1724
}
1825

26+
.ms-hero-link {
27+
display: inline-flex;
28+
align-items: center;
29+
justify-content: center;
30+
color: #52606d;
31+
text-decoration: none;
32+
line-height: 1;
33+
transition:
34+
transform 0.16s ease,
35+
color 0.16s ease,
36+
opacity 0.16s ease;
37+
}
38+
39+
.ms-hero-link:hover,
40+
.ms-hero-link:focus-visible {
41+
transform: translateY(-1px);
42+
color: #102a43;
43+
opacity: 1;
44+
}
45+
46+
.ms-hero-link--icon-only {
47+
padding: 0.1rem;
48+
opacity: 0.78;
49+
}
50+
51+
.ms-btn-icon {
52+
width: 1.05rem;
53+
height: 1.05rem;
54+
flex: 0 0 auto;
55+
}
56+
1957
.md-card {
2058
background: rgba(255, 255, 255, 0.96);
2159
border: 1px solid rgba(148, 163, 184, 0.18);

‎xlsx2md-src.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@
2525
<script src="lht-cmn/js/components.js" defer></script>
2626
</head>
2727
<body class="md-page">
28+
<svg width="0" height="0" aria-hidden="true" focusable="false" class="md-icons">
29+
<symbol id="md-icon-github" viewBox="0 0 16 16">
30+
<path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.5 7.5 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z"></path>
31+
</symbol>
32+
</svg>
2833
<main class="md-shell">
2934
<section class="md-card md-surface-card">
3035
<lht-page-hero
@@ -33,7 +38,10 @@
3338
icon="📘"
3439
help-label="xlsx2md の説明"
3540
help-wide
36-
menu-home-href="../index.html"
41+
action-href="https://github.com/igapyon/xlsx2md"
42+
action-aria-label="Open xlsx2md repository"
43+
action-icon-id="md-icon-github"
44+
menu-home-href="./index.html"
3745
menu-home-label="トップへ戻る">
3846
`.xlsx` ファイルをローカルで解析し、地の文抽出・表検出・結合セル補完を行ったうえで Markdown を生成します。
3947
</lht-page-hero>

0 commit comments

Comments
 (0)