init: Posimai Chronicle v0 skeleton

2026-04-23 16:17:45 +09:00 · 2026-04-23 16:17:45 +09:00 · bbb092c586
commit bbb092c586
6 changed files with 254 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,144 @@
+<!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>
--- a/logo.svg
+++ b/logo.svg
@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Posimai Chronicle logo">
+  <defs>
+    <radialGradient id="g" cx="50%" cy="40%" r="65%">
+      <stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#0D0D0D" stop-opacity="1"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" rx="108" fill="#0D0D0D"/>
+  <circle cx="256" cy="220" r="128" fill="url(#g)"/>
+  <path d="M152 326h208" stroke="#6EE7B7" stroke-width="20" stroke-linecap="round"/>
+  <path d="M182 372h148" stroke="#6EE7B7" stroke-width="16" stroke-linecap="round" opacity="0.75"/>
+</svg>
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,16 @@
+{
+    "id": "/posimai-chronicle/",
+    "name": "Posimai Chronicle",
+    "short_name": "Chronicle",
+    "description": "AI駆動開発の記録を下書き化するChronicleの原形",
+    "start_url": "/",
+    "display": "standalone",
+    "display_override": ["window-controls-overlay", "standalone"],
+    "background_color": "#0D0D0D",
+    "theme_color": "#0D0D0D",
+    "orientation": "portrait-primary",
+    "categories": ["productivity"],
+    "icons": [
+        { "src": "/logo.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
+    ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,9 @@
+{
+    "name": "posimai-chronicle",
+    "version": "0.1.0",
+    "description": "AI駆動開発ログを下書き化する Chronicle の原形",
+    "private": true,
+    "scripts": {
+        "deploy": "git push gitea main && git push github main"
+    }
+}
--- a/sw.js
+++ b/sw.js
@ -0,0 +1,31 @@
+const CACHE = "posimai-chronicle-v1";
+const STATIC = ["/", "/index.html", "/manifest.json", "/logo.svg"];
+
+self.addEventListener("install", e => {
+    e.waitUntil(caches.open(CACHE).then(c => c.addAll(STATIC)));
+    self.skipWaiting();
+});
+
+self.addEventListener("activate", e => {
+    e.waitUntil(
+        caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))))
+            .then(() => self.clients.claim())
+    );
+});
+
+self.addEventListener("fetch", e => {
+    if (e.request.method !== "GET") return;
+    if (!e.request.url.startsWith(self.location.origin)) return;
+
+    e.respondWith(
+        caches.open(CACHE).then(cache =>
+            cache.match(e.request).then(cached => {
+                const network = fetch(e.request).then(res => {
+                    if (res.ok && res.type === "basic") cache.put(e.request, res.clone());
+                    return res;
+                }).catch(() => cached);
+                return cached || network;
+            })
+        )
+    );
+});
--- a/vercel.json
+++ b/vercel.json
@ -0,0 +1,42 @@
+{
+  "headers": [
+    {
+      "source": "/sw.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "X-XSS-Protection",
+          "value": "1; mode=block"
+        },
+        {
+          "key": "Referrer-Policy",
+          "value": "strict-origin-when-cross-origin"
+        },
+        {
+          "key": "Content-Security-Policy",
+          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://unpkg.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com https://posimai-ui.vercel.app; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self'; worker-src 'self'; frame-ancestors 'none';"
+        },
+        {
+          "key": "Strict-Transport-Security",
+          "value": "max-age=31536000; includeSubDomains"
+        }
+      ]
+    }
+  ]
+}