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

このHTMLは、既存Webアプリをブラウザで実際に表示した後のDOMです。
外部CSSは取得されていませんが、各要素には computed style が inline style として付与されています。
また、各要素には以下の位置情報が付与されています。

data-webappclone-x
data-webappclone-y
data-webappclone-w
data-webappclone-h
data-webappclone-tag

これらの情報を利用して、画面内の部品、ラベル、入力項目、一覧テーブル、ボタン、表示専用項目、検索条件、編集項目などを識別してください。

重要：
既存WebアプリのHTML、CSS、JavaScriptをそのまま複製する目的ではありません。
既存画面の業務構造、入力項目、一覧項目、操作ボタン、レイアウト情報を参考にし、
自社専用のWeb+DB業務アプリ画面として新規に再構成してください。

固有のロゴ、商標、外部サービス名、著作権性の高い文章、広告、不要なナビゲーション、フッター、外部リンクは再利用しないでください。
業務アプリに必要な項目、フォーム、一覧、ボタンを中心に再構成してください。

要件:

画面内の部品を識別してください。識別対象は以下です。
ラベル
入力テキストボックス
テキストエリア
チェックボックス
選択リスト
ラジオボタン
通常ボタン
一覧テーブル
タブ
表示専用フィールド
検索条件
一覧項目
編集ボタン
削除ボタン
詳細ボタン
登録ボタン
更新ボタン

識別結果をもとに、画面レイアウトをHTMLで再現してください。
必要に応じてCSSも作成してください。CSSはHTML内部に記述、別ファイルにしない。

元HTMLの inline style と data-webappclone-x/y/w/h は、画面部品の位置、サイズ、余白、色、文字サイズ、ボタン形状、一覧表の構成を推定するために利用してください。
ただし、元HTMLをそのまま丸写しせず、業務アプリとして使いやすいHTML/CSSに整理してください。

input, textarea, select, button, table, th, td, label, form, a, div を重視してください。
ラベルと入力欄の関係は、テキスト内容、name、id、placeholder、aria-label、title、class、位置情報 data-webappclone-x/y/w/h から推定してください。
近くに配置されているラベルと入力欄は関連項目として扱ってください。

入力テキストボックス、テキストエリア、選択リストの初期値は
<#フィールド名> の形式にしてください。

ラベル名からDB、SQLのフィールド名を自動生成してください。
フィールド名は英小文字のスネークケースとし、日本語ラベルを意味の近い英語またはローマ字に変換してください。
画面上のラベル名は日本語のままにしてください。

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

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

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

{
  "html": "HTML全文",
  "sql": "SQLite用CREATE TABLE文と初期データINSERT文",
  "field1_caption": "主要なカラム1名前キャプション",
  "field1_name": "主要なカラム1名前SQLフィールド名",
  "field2_caption": "主要なカラム2名前キャプション",
  "field2_name": "主要なカラム2名前SQLフィールド名"
}

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

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

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

SQLカラムは、入力項目、表示専用項目、一覧テーブルの主要項目から作成してください。
ただし、操作ボタン、装飾要素、ナビゲーション、広告、ロゴ、外部リンク、script、hiddenの機密値、Cookie、token、passwordはDB項目にしないでください。

一覧テーブルが存在する場合は、そのth、td、列見出し、周辺ラベルから主要なDBカラムを推定してください。
検索画面の場合は、検索条件項目と一覧表示項目の両方を考慮してテーブル定義を作成してください。
編集画面の場合は、入力フォームを中心にテーブル定義を作成してください。
詳細画面の場合は、表示専用フィールドもDBカラム候補として扱ってください。

不明な項目は推定で補い、推定した箇所はHTMLコメントまたはSQLコメントで明示してください。

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

HTML内のコメント指示に従う。

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

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

生成HTMLでは、元HTMLの不要な大量inline styleをそのまま残さず、必要に応じて整理したCSSに変換してください。
ただし、元画面の大まかな配置、入力欄の並び、一覧表の位置、ボタンの位置関係は維持してください。

セキュリティ上の注意：
password型の値、token、cookie、認証情報、個人情報らしき実データは出力に含めないでください。
実データはサンプル値または <#フィールド名> に置き換えてください。
既存Webアプリの固有名称、ロゴ、商標、著作権性の高い文章は再利用しないでください。

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