File size: 8,015 Bytes
bebebd9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トヨタ式カンバン</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-shell">
<header class="app-header">
<div class="brand">
<span class="brand-mark">◯</span>
<div>
<h1>TOYOTA KANBAN</h1>
<p class="subtitle">現場の視点で磨き上げたタスクフロー</p>
</div>
</div>
<div class="primary-controls">
<button class="btn primary" id="btn-new-task">新規タスク</button>
<button class="btn ghost" id="btn-toggle-group">親子ビュー</button>
<button class="btn ghost" id="btn-toggle-selection">一括操作</button>
</div>
</header>
<section class="filters">
<div class="search-box">
<label for="search-input">検索</label>
<input id="search-input" type="search" placeholder="キーワードで検索 (タイトル・担当・内容・タグ・リンク)">
</div>
<div class="date-filter">
<label>期限</label>
<div class="date-inputs">
<input id="date-from" type="date">
<span>〜</span>
<input id="date-to" type="date">
</div>
</div>
<div class="parent-filter">
<label for="parent-filter-select">親タスク</label>
<input id="parent-filter-search" type="search" placeholder="親タスク名で絞り込み">
<select id="parent-filter-select">
<option value="">すべて</option>
</select>
</div>
<div class="tag-filter-row">
<span class="tag-filter-label">タグ</span>
<div id="tag-toggle-container" class="tag-toggle-container"></div>
</div>
<div class="filter-actions">
<button class="btn small ghost" id="filter-reset-button">フィルター解除</button>
</div>
</section>
<section class="selection-toolbar" id="selection-toolbar">
<div class="selection-summary">
<span id="selection-count">0件選択中</span>
<button class="btn subtle" id="btn-select-all">全選択</button>
<button class="btn subtle" id="btn-clear-selection">選択解除</button>
</div>
<div class="selection-actions">
<div class="selection-status">
<span>ステータス変更:</span>
<div id="bulk-status-buttons" class="status-button-group"></div>
</div>
<button class="btn danger" id="btn-bulk-delete">選択を削除</button>
</div>
</section>
<section class="status-dock" id="status-dock"></section>
<main class="board" id="board"></main>
<section class="parent-view" id="parent-view">
<header>
<h2>親子ビュー</h2>
<div class="parent-view-meta">
<p>親タスクごとの進捗を俯瞰し、ワンクリックでボードに反映できます。</p>
<div class="parent-view-controls">
<input id="parent-view-search" type="search" placeholder="親タスク・子タスク・タグを検索">
<button class="btn small ghost" id="parent-view-clear">ハイライト解除</button>
</div>
</div>
</header>
<div class="parent-clusters" id="parent-clusters"></div>
</section>
</div>
<dialog id="task-dialog" class="task-dialog">
<form method="dialog" id="task-form">
<header>
<h3 id="dialog-title">タスクを追加</h3>
<button type="button" class="icon-button" id="dialog-close" aria-label="閉じる">×</button>
</header>
<div class="form-body">
<div class="field">
<label for="task-title">タイトル</label>
<input id="task-title" name="title" type="text" required>
</div>
<div class="field-grid">
<div class="field">
<label for="task-assignee">担当</label>
<input id="task-assignee" name="assignee" type="text" placeholder="担当者名">
</div>
<div class="field">
<label for="task-due">期限</label>
<input id="task-due" name="dueDate" type="date">
</div>
</div>
<div class="field">
<label for="task-link">リンク</label>
<input id="task-link" name="link" type="url" placeholder="https:// または file://">
</div>
<div class="field">
<label for="task-tags">タグ</label>
<input id="task-tags" name="tags" type="text" placeholder="カンマ区切り (例: 設計,レビュー)">
</div>
<div class="field">
<label for="task-progress">進捗メモ</label>
<textarea id="task-progress" name="progress" rows="3"></textarea>
</div>
<div class="field">
<label for="task-notes">備考メモ</label>
<textarea id="task-notes" name="notes" rows="3"></textarea>
</div>
<div class="field">
<label for="task-parent">親タスク</label>
<select id="task-parent" name="parentId">
<option value="">なし</option>
</select>
</div>
<div class="field">
<label for="task-status">ステータス</label>
<select id="task-status" name="status" required></select>
</div>
</div>
<footer>
<button type="submit" class="btn primary">保存</button>
<button type="button" class="btn ghost" id="task-delete-button">削除</button>
</footer>
</form>
</dialog>
<template id="task-card-template">
<article class="task-card">
<header class="task-card-header">
<div class="title-row">
<input type="checkbox" class="task-select">
<h3 class="task-title"></h3>
</div>
<div class="status-quick-buttons"></div>
</header>
<div class="task-meta">
<span class="assignee"></span>
<span class="due-date"></span>
</div>
<div class="task-body">
<div class="progress"></div>
<div class="notes"></div>
<a class="resource-link" target="_blank" rel="noopener"></a>
</div>
<div class="task-tags"></div>
<div class="task-children"></div>
<footer class="task-footer">
<button class="btn tiny" data-action="edit">編集</button>
<button class="btn tiny danger" data-action="delete">削除</button>
</footer>
</article>
</template>
<script src="script.js" defer></script>
</body>
</html>
|