200 lines
12 KiB
HTML
200 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<script>
|
|
(function () {
|
|
var t = localStorage.getItem('APP_ID-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);
|
|
})();
|
|
</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="description" content="APP_DESCRIPTION">
|
|
<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="APP_NAME">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="icon" type="image/png" href="/logo.png">
|
|
<link rel="apple-touch-icon" href="/logo.png">
|
|
<title>APP_NAME</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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root, [data-theme="dark"] {
|
|
--bg:#0D0D0D; --surface:#1A1A1A; --surface2:#252525; --border:#2D2D2D;
|
|
--text:#F3F4F6; --text2:#9CA3AF; --text3:#6B7280;
|
|
--accent:#6EE7B7; --accent-dim:rgba(110,231,183,0.1); --accent-border:rgba(110,231,183,0.25);
|
|
--header-bg:rgba(13,13,13,0.85);
|
|
--overlay-bg:rgba(0,0,0,0.6); --shadow-lg:0 8px 32px rgba(0,0,0,0.5); --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
|
|
color-scheme: dark;
|
|
}
|
|
[data-theme="light"] {
|
|
--bg:#F9FAFB; --surface:#FFFFFF; --surface2:#F3F4F6; --border:#E5E7EB;
|
|
--text:#111827; --text2:#4B5563; --text3:#9CA3AF;
|
|
--accent:#059669; --accent-dim:rgba(5,150,105,0.08); --accent-border:rgba(5,150,105,0.2);
|
|
--header-bg:rgba(249,250,251,0.85);
|
|
--overlay-bg:rgba(0,0,0,0.4); --shadow-lg:0 8px 32px rgba(0,0,0,0.15); --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
|
|
color-scheme: light;
|
|
}
|
|
:root { --radius:12px; --radius-sm:8px; --header-h:52px; --ease:cubic-bezier(.4,0,.2,1); --dur:0.2s; }
|
|
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
|
|
:focus:not(:focus-visible) { outline: none; }
|
|
|
|
/* Header */
|
|
.header { height: var(--header-h); display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
|
|
.header-brand { display: flex; align-items: center; gap: 8px; flex: 1; }
|
|
.header-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
|
|
.header-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
|
|
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text2); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: color var(--dur), background var(--dur); flex-shrink: 0; margin: 0 -8px; }
|
|
.icon-btn:hover { color: var(--text); background: var(--surface2); }
|
|
|
|
/* Main content */
|
|
main { padding: 24px 20px calc(40px + env(safe-area-inset-bottom)); max-width: 860px; width: 100%; margin: 0 auto; }
|
|
|
|
/* Settings panel */
|
|
.settings-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 300; transform: translateX(100%); transition: transform .25s var(--ease); }
|
|
.settings-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
|
|
.settings-panel-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
|
|
.settings-panel-title { font-size: 14px; font-weight: 600; }
|
|
.settings-panel-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 24px; }
|
|
.settings-group-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
|
|
.settings-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
|
.settings-item:last-child { border-bottom: none; }
|
|
.settings-item-label { font-size: 13px; color: var(--text); }
|
|
.theme-selector { display: flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
|
|
.theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500; color: var(--text3); background: none; transition: all var(--dur) var(--ease); white-space: nowrap; }
|
|
.theme-btn:hover { color: var(--text2); }
|
|
.theme-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
|
|
.overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(2px); z-index: 150; }
|
|
.overlay.open { display: block; }
|
|
|
|
/* Common components */
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all var(--dur) var(--ease); }
|
|
.btn-primary { background: var(--accent); color: #0D0D0D; }
|
|
.btn-primary:hover { opacity: .88; }
|
|
.btn-ghost { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
|
|
.btn-ghost:hover { color: var(--text); background: var(--surface); }
|
|
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
|
|
.section-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
|
|
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 500; z-index: 9999; box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s; opacity: 0; pointer-events: none; white-space: nowrap; }
|
|
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
|
|
|
|
/* ── APP-SPECIFIC STYLES: ここにアプリ固有のスタイルを追加 ── */
|
|
|
|
</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>
|
|
|
|
<!-- Settings panel -->
|
|
<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>
|
|
<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>
|
|
</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">APP_NAME</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">
|
|
<!-- ── APP-SPECIFIC HTML: ここにアプリ固有のコンテンツを追加 ── -->
|
|
|
|
<!-- Empty state placeholder — アプリ実装時に削除 -->
|
|
<div style="text-align:center;padding:80px 24px;color:var(--text3);">
|
|
<i data-lucide="box" style="width:40px;height:40px;stroke-width:1.25;margin-bottom:12px;display:block;margin-inline:auto;opacity:.5"></i>
|
|
<div style="font-size:14px;font-weight:500;">APP_NAME</div>
|
|
<div style="font-size:13px;margin-top:4px;">APP_DESCRIPTION</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="toast" role="status" aria-live="polite"></div>
|
|
|
|
<script>
|
|
// ── Theme ──
|
|
const STORE_KEY = 'APP_ID';
|
|
function applyTheme(val) {
|
|
const dark = val === 'dark' || (val === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
document.documentElement.setAttribute('data-theme-pref', val);
|
|
document.querySelectorAll('[data-theme-val]').forEach(b => b.classList.toggle('active', b.dataset.themeVal === val));
|
|
}
|
|
document.querySelectorAll('[data-theme-val]').forEach(b => b.addEventListener('click', () => {
|
|
const val = b.dataset.themeVal;
|
|
localStorage.setItem(STORE_KEY + '-theme', val);
|
|
applyTheme(val);
|
|
}));
|
|
applyTheme(localStorage.getItem(STORE_KEY + '-theme') || 'system');
|
|
|
|
// ── Settings panel ──
|
|
const settingsPanel = document.getElementById('settingsPanel');
|
|
const overlay = document.getElementById('overlay');
|
|
document.getElementById('settingsBtn').addEventListener('click', () => {
|
|
settingsPanel.classList.add('open');
|
|
overlay.classList.add('open');
|
|
document.getElementById('settingsBtn').setAttribute('aria-expanded', 'true');
|
|
});
|
|
function closeSettings() {
|
|
settingsPanel.classList.remove('open');
|
|
overlay.classList.remove('open');
|
|
document.getElementById('settingsBtn').setAttribute('aria-expanded', 'false');
|
|
}
|
|
document.getElementById('settingsCloseBtn').addEventListener('click', closeSettings);
|
|
overlay.addEventListener('click', closeSettings);
|
|
|
|
// ── Toast ──
|
|
function showToast(msg, duration = 2500) {
|
|
const el = document.getElementById('toast');
|
|
el.textContent = msg;
|
|
el.classList.add('show');
|
|
setTimeout(() => el.classList.remove('show'), duration);
|
|
}
|
|
|
|
// ── PWA Service Worker ──
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
|
}
|
|
|
|
// ── Lucide icons ──
|
|
lucide.createIcons();
|
|
|
|
// ── APP-SPECIFIC JS: ここにアプリ固有のロジックを追加 ──
|
|
</script>
|
|
</body>
|
|
</html>
|