145 lines
7.5 KiB
HTML
145 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja" data-app-id="posimai-chronicle">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<script>
|
||
(function () {
|
||
var t = localStorage.getItem('posimai-chronicle-theme') || 'system';
|
||
var dark = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
|
||
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||
document.documentElement.setAttribute('data-theme-pref', t);
|
||
|
||
var p = new URLSearchParams(location.search);
|
||
var tk = p.get('token');
|
||
if (tk) {
|
||
localStorage.setItem('posimai_token', tk);
|
||
p.delete('token');
|
||
var u = location.pathname + (p.toString() ? '?' + p.toString() : '') + location.hash;
|
||
history.replaceState({}, '', u);
|
||
}
|
||
})();
|
||
</script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<meta name="description" content="AI駆動開発の記録を下書き化するChronicleの原形">
|
||
<meta name="color-scheme" content="dark light">
|
||
<meta name="theme-color" content="#0D0D0D" media="(prefers-color-scheme: dark)">
|
||
<meta name="theme-color" content="#F9FAFB" media="(prefers-color-scheme: light)">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="Posimai Chronicle">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<link rel="icon" type="image/svg+xml" href="/logo.svg">
|
||
<link rel="apple-touch-icon" href="/logo.svg">
|
||
<title>Posimai Chronicle</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://posimai-ui.vercel.app/v1/base.css">
|
||
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-tTkFttkBclaU1cloKwOi9xk3pbao3VZxTjLNBt8iFABWDBQibbAbWpVmO28zMuxq" crossorigin="anonymous"></script>
|
||
<style>
|
||
.chronicle-wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 88px; }
|
||
.chronicle-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
|
||
@media (min-width: 900px) { .chronicle-grid { grid-template-columns: 1fr 1fr; } }
|
||
.chronicle-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 14px;
|
||
}
|
||
.chronicle-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
|
||
.chronicle-text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text2); }
|
||
.chronicle-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
|
||
.kpi { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
|
||
.kpi-label { font-size: 11px; color: var(--text3); }
|
||
.kpi-value { margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--text); }
|
||
.muted { color: var(--text3); font-size: 11px; margin-top: 6px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" class="skip-link" tabindex="0" style="position:absolute;top:-100%;left:8px;background:var(--accent);color:#0D0D0D;padding:8px 16px;border-radius:8px;font-weight:600;font-size:13px;z-index:10000;text-decoration:none">コンテンツへスキップ</a>
|
||
|
||
<aside class="settings-panel" id="settingsPanel" role="complementary">
|
||
<div class="settings-panel-header">
|
||
<span class="settings-panel-title">設定</span>
|
||
<button class="icon-btn" id="settingsCloseBtn" aria-label="設定を閉じる">
|
||
<i data-lucide="x" style="width:18px;height:18px;stroke-width:1.75"></i>
|
||
</button>
|
||
</div>
|
||
<div class="settings-panel-body">
|
||
<div class="settings-group-label">外観</div>
|
||
<div class="settings-item">
|
||
<div class="settings-item-label">テーマ</div>
|
||
<div class="theme-selector">
|
||
<button class="theme-btn" data-theme-val="dark"><i data-lucide="moon" style="width:12px;height:12px;stroke-width:1.75"></i>ダーク</button>
|
||
<button class="theme-btn" data-theme-val="light"><i data-lucide="sun" style="width:12px;height:12px;stroke-width:1.75"></i>ライト</button>
|
||
<button class="theme-btn" data-theme-val="system"><i data-lucide="monitor" style="width:12px;height:12px;stroke-width:1.75"></i>自動</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="overlay" id="overlay" aria-hidden="true"></div>
|
||
|
||
<header class="header">
|
||
<div class="header-brand">
|
||
<div class="header-dot" aria-hidden="true"></div>
|
||
<span class="header-title">Posimai Chronicle</span>
|
||
</div>
|
||
<button class="icon-btn" id="settingsBtn" aria-label="設定" aria-expanded="false">
|
||
<i data-lucide="settings" style="width:18px;height:18px;stroke-width:1.5"></i>
|
||
</button>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<div class="chronicle-wrap">
|
||
<div class="chronicle-card">
|
||
<h1 class="chronicle-title">Chronicle 原形（v0）</h1>
|
||
<p class="chronicle-text">
|
||
これは「開発ログ・気分・作業負荷」を統合して、公開前の下書きを作るための最小画面です。
|
||
現在はモック表示のみで、外部API接続や自動投稿は実行しません。
|
||
</p>
|
||
<div class="chronicle-kpi">
|
||
<div class="kpi">
|
||
<div class="kpi-label">入力ソース</div>
|
||
<div class="kpi-value">5</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">下書き候補</div>
|
||
<div class="kpi-value">1</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">公開可否</div>
|
||
<div class="kpi-value">確認待ち</div>
|
||
</div>
|
||
</div>
|
||
<p class="muted">次段階: Gitea/Journal/Habit/Pulse/Station の読み取り接続</p>
|
||
</div>
|
||
|
||
<div class="chronicle-grid">
|
||
<article class="chronicle-card">
|
||
<h2 class="chronicle-title">1. 収集</h2>
|
||
<p class="chronicle-text">コミット、Issue、体調ログ、負荷メトリクスを時系列に整列。</p>
|
||
</article>
|
||
<article class="chronicle-card">
|
||
<h2 class="chronicle-title">2. 生成</h2>
|
||
<p class="chronicle-text">要点を3段構成でドラフト化（進捗、学び、次の一手）。</p>
|
||
</article>
|
||
<article class="chronicle-card">
|
||
<h2 class="chronicle-title">3. レビュー</h2>
|
||
<p class="chronicle-text">公開前に1行コメントを追記し、タイトルを最終確定。</p>
|
||
</article>
|
||
<article class="chronicle-card">
|
||
<h2 class="chronicle-title">4. 公開</h2>
|
||
<p class="chronicle-text">公開先へ送信。失敗時は draft 状態のまま保持。</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="toast" role="status" aria-live="polite"></div>
|
||
|
||
<script src="https://posimai-ui.vercel.app/v1/base.js" defer></script>
|
||
</body>
|
||
</html>
|