Upload 3 files

bebebd9 verified 4 months ago

8.02 kB

	<!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>