
次の画像から、業務用Webアプリ画面を作成してください。

要件:

画面内の部品を識別してください。識別対象は以下です。
ラベル
入力テキストボックス
テキストエリア
チェックボックス
選択リスト
ラジオボタン
通常ボタン
一覧テーブル
タブ
表示専用フィールド
識別結果をもとに、画面レイアウトをHTMLで再現してください。
必要に応じてCSSも作成してください。CSSはHTML内部に記述、別ファイルにしない。
入力テキストボックス、テキストエリア、選択リストの初期値は
<#フィールド名> の形式にしてください。
ラベル名からフィールド名を自動生成してください。
フィールド名は英小文字のスネークケースとし、日本語ラベルを意味の近い英語またはローマ字に変換してください。

HTMLファイル名は以下とする
*****FileName*****

SQLテーブル名は以下とする
*****TableName*****

出力は必ず以下のJSON形式のみとしてください。
説明文、Markdown、コードブロック記号は一切不要です。

{
  "html": "HTML全文",
  "sql": "SQLite用CREATE TABLE文と初期データINSERT文"
}


この画面の入力項目をもとに、テーブル定義を作成してください。
以下を出力してください。
テーブル名
カラム名
データ型
NULL可否の初期推定
主キー候補
SQLは CREATE TABLE 文で出力してください。

最初3カラムは必ず以下を追加してください

RecID INTEGER PRIMARY KEY AUTOINCREMENT,
AddDate TEXT,
ModDate TEXT,

出力は以下の順番にしてください。

画面部品の識別結果
HTML
CSSはHTML内部に記述、別ファイルにしない。
SQL
不明な項目は推定で補い、推定した箇所はコメントで明示してください。


以下のHTMLテンプレートに可能な限り従って生成してください。
class名、id名、ブロック構造を優先して維持してください。
不足部分のみ補完してください。
CSSはHTML内部に記述、別ファイルにしない。

既に存在する以下要素は極力削除や変更しない、
ボタン、フォーム、hidden input、JavaScript、外枠のdiv
HTMLソースのHTMLファイル名、テーブル名は変更しない
例：wdb_item、item.html、itemlist.htmlなど

例えば以下のように変更する
ItemNoをProjectNo
ItemNameをProjectNameに
作成したSQLのカラムｍフィールド名に置き換える


[HTML TEMPLATE START]
*****template*****
[HTML TEMPLATE END]
