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

要件:

今回の目的：
元画面の業務構造、入力項目、一覧項目、ボタン、検索条件、画面の雰囲気を読み取り、業務用Web+DBアプリ画面として再構成してください。

重要：
元画像の座標、部品の絶対位置、横並びの密集配置を忠実に再現しないでください。
元画面の「雰囲気」は参考にしますが、HTML/CSSでは業務アプリとして読みやすく、操作しやすく、ラベルや入力欄が重ならないレイアウトへ再設計してください。

最優先ルール：
ラベル、入力欄、ボタン、テーブル、タブ、表示専用項目、見出しは絶対に重ねないでください。
元画像で重なって見える、または密集している場合でも、HTMLでは十分な余白を取り、縦方向または複数行に展開してください。

配置の忠実性より、重なり防止、可読性、操作性を優先してください。


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

重要：
出力する html は、完全なHTML文書ではありません。
index.html の以下の位置に include される部分HTMLです。

<div id="main1">
  <#Include FileName=tok_fmt1>
</div>

そのため、html には以下を絶対に含めないでください。

<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<body>
</body>
</html>

html には、main1 内に挿入するHTML断片だけを出力してください。
CSSが必要な場合は、html の先頭に <style>...</style> として含めてください。
headタグは使わないでください。


HTMLソース上の入力値の扱い：

入力テキストボックス、テキストエリア、選択リストの初期値は
<#フィールド名> の形式にしてください。
DB内のデータ初期値ではない、DB内のデータに<#フィールド名> の形式は絶対使わない。

実データらしき値、個人名、電話番号、メールアドレス、住所、ID、token、cookie、password、認証情報はそのまま出力せず、
<#フィールド名> または一般的なサンプル値に置き換えてください。

重要：
生成HTML内の input / textarea / select の name 属性は、
SQLite のカラム名と必ず完全一致させてください。

例：
<input type="text" name="ToName1" value="<#ToName1>">

この場合、SQLのカラム名も必ず ToName1 としてください。

CREATE TABLE *****TableName***** (
  RecID INTEGER PRIMARY KEY AUTOINCREMENT,
  AddDate TEXT,
  ModDate TEXT,
  ToName1 TEXT
);

name="ToName1" に対して、to_name、to_name1、toName1、toname1 などへ変換してはいけません。
大文字・小文字も含めて完全一致させてください。

また、value の差し込みタグも name 属性と一致させてください。

正：
<input type="text" name="ToName1" value="<#ToName1>">

誤：
<input type="text" name="ToName1" value="<#to_name>">

DB・SQL生成方針：

ラベル名から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,

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

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


テンプレート利用方針：

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

HTML内のコメント指示に従ってください。

重要：
以下の指示は、[HTML TEMPLATE START] ～ [HTML TEMPLATE END] 内のHTMLテンプレートに対する指示です。

HTMLテンプレート内に既に存在する以下の要素は、原則として削除しないでください。

- form タグ
- hidden input
- JavaScript
- script タグ
- onclick / onsubmit などのイベント属性
- 登録・更新・削除・検索・戻る・キャンセル等のボタン
- id 属性
- name 属性
- 外枠の div
- メインコンテンツ用 div
- 一覧表示用 table
- 登録・更新・削除・検索に関係する要素

テンプレート内の form、hidden input、JavaScript は、WebAppExpress の登録・更新・削除・検索処理に必要な場合があります。
そのため、解析用HTML側で不要・危険と判断される hidden、script、token、cookie 等とは区別してください。

元画面由来の hidden、script、token、cookie、password、認証情報は生成HTMLに流用しないでください。
ただし、HTMLテンプレート内に元々存在する hidden input、JavaScript、イベント属性は維持してください。

HTMLソースのHTMLファイル名、テーブル名は変更しないでください。
例：wdb_item、item.html、itemlist.html など

例えば以下のように変更してください。

ItemNoをProjectNoに
ItemNameをProjectNameに
作成したSQLのカラムフィールド名に置き換える。


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