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

このHTMLは、WebAppClone がブラウザ表示中の画面から抽出した API解析用の軽量HTMLです。
実ページのHTMLそのものではありません。

各 div 要素は、元画面上の1つの画面部品または画面ブロックを表しています。
data-x / data-y / data-w / data-h により、元画面上の位置とサイズが記録されています。
data-style には、元画面の見た目を再現するための最小限のスタイル情報が含まれています。

今回の目的：
元画面の業務構造を読み取るだけでなく、元画面の見た目、配置、色、余白、フォントサイズ、ボタン形状、一覧表の雰囲気をできるだけ忠実に再現してください。

ただし、既存WebアプリのHTML、CSS、JavaScript、ロゴ、商標、画像、著作権性の高い文章をそのまま複製する目的ではありません。
業務アプリとして必要な画面構造を保ちながら、元画面に近い印象の自社専用Web+DBアプリ画面として新規に再構成してください。

重要：
出力する 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には、入力HTMLの data-* 解析属性をそのまま大量に残さないでください。
解析用HTMLの情報を参考にし、保守しやすいHTML/CSSとして再構成してください。

主に利用する解析情報：

- data-tag
  元のHTMLタグ種別

- data-role
  要素の役割
  例：input, textarea, select, button, checkbox, radio, table, row, cell, header-cell, label, heading, link など

- data-x
  画面上のX座標

- data-y
  画面上のY座標

- data-w
  要素の幅

- data-h
  要素の高さ

- data-id
  元要素のid

- data-name
  元要素のname

- data-type
  input type

- data-placeholder
  placeholder

- data-aria
  aria-label

- data-title
  title属性

- data-value
  入力値、選択状態、チェック状態など

- data-options
  select候補

- data-style
  最小限の見た目情報
  例：color, bg, fs, fw, ta, border, radius など

- div内のテキスト
  ラベル、ボタン名、見出し、一覧セル、表示項目など

特に重視すること：

1. data-x / data-y / data-w / data-h を使い、元画面の大まかな配置を再現してください。
2. 近くに配置されたラベルと入力欄は同一項目として扱ってください。
3. 左側ラベル・右側入力欄、上側ラベル・下側入力欄の関係を重視してください。
4. data-style の color / bg / fs / fw / ta / border / radius を参考にしてください。
5. ボタンの色、角丸、サイズ感、配置をできるだけ元画面に近づけてください。
6. 一覧表がある場合は、列幅、ヘッダー色、罫線、セル余白、行の高さを元画面の雰囲気に近づけてください。
7. 検索条件、フォーム、一覧表、詳細情報、操作ボタンの位置関係をできるだけ維持してください。
8. ただし、position:absolute の多用は避け、CSS Grid または Flexbox を使って保守しやすく再構成してください。
9. 完全なpx単位コピーではなく、元画面の印象を維持した実用的な業務アプリHTMLにしてください。

識別対象：

- ラベル
- 入力テキストボックス
- テキストエリア
- チェックボックス
- 選択リスト
- ラジオボタン
- 通常ボタン
- 一覧テーブル
- タブ
- 表示専用フィールド
- 検索条件
- 一覧項目
- 編集ボタン
- 削除ボタン
- 詳細ボタン
- 登録ボタン
- 更新ボタン
- 検索ボタン
- 戻るボタン
- キャンセルボタン

重視する要素：

- data-role="input"
- data-role="textarea"
- data-role="select"
- data-role="checkbox"
- data-role="radio"
- data-role="button"
- data-role="table"
- data-role="row"
- data-role="header-cell"
- data-role="cell"
- data-role="label"
- data-role="heading"

また、data-tag が以下の場合も重視してください。

- input
- textarea
- select
- button
- table
- tr
- th
- td
- label
- form
- a
- div

レイアウト再現方針：

- 元画面で上部にヘッダーやタイトルがある場合は、同じように上部エリアを作成してください。
- 左側にメニューやサイドバーがある場合は、必要最小限で似た配置を作成してください。
- 検索条件が上部にある場合は、.search-panel として上部に配置してください。
- 入力フォームは、元画面の項目並びに近い形で .form-section / .form-row に整理してください。
- 一覧表は、元画面の位置関係を参考に .data-table として配置してください。
- 操作ボタンは、元画面に近い位置に配置してください。
- 複数列フォームの場合は、CSS Grid を使って2列または3列レイアウトにしてください。
- 画面全体の余白、背景色、カード感、罫線、フォントサイズは data-style を参考にしてください。

CSS再現方針：

- CSSはHTML内部に記述し、別ファイルにしないでください。
- 元画面の色、背景色、罫線、余白、フォントサイズ、ボタン形状をできるだけ反映してください。
- data-style の bg は background-color として参考にしてください。
- data-style の color は文字色として参考にしてください。
- data-style の fs は font-size として参考にしてください。
- data-style の fw は font-weight として参考にしてください。
- data-style の border は border として参考にしてください。
- data-style の radius は border-radius として参考にしてください。
- ただし、入力HTMLの data-style をそのまま全コピーせず、共通CSSクラスへ整理してください。

推奨CSSクラス：

- .app-container
- .app-header
- .app-title
- .content-area
- .search-panel
- .form-section
- .form-grid
- .form-row
- .form-label
- .form-control
- .button-area
- .btn
- .btn-primary
- .btn-secondary
- .btn-danger
- .data-table
- .detail-panel
- .card
- .tabs
- .tab-item

HTML生成方針：

- 元画面に近い見た目を優先しつつ、業務アプリとして編集しやすい構造にしてください。
- 解析用HTMLの data-* 属性は生成HTMLに残さないでください。
- 大量の inline style は避け、styleタグ内のCSSクラスに整理してください。
- 必要に応じて短いHTMLコメントで推定箇所を示してください。
- 外部CSS、外部JavaScript、外部画像、外部フォントは使用しないでください。
- JavaScriptは必要最小限にしてください。
- 生成HTMLは単体で表示できる内容にしてください。

ラベルと入力欄の関係推定：

以下の情報を総合して、入力項目名を推定してください。

- div内のテキスト
- data-name
- data-id
- data-placeholder
- data-aria
- data-title
- data-type
- data-value
- data-options
- data-x / data-y / data-w / data-h
- data-style

近くに配置されているラベルと入力欄は関連項目として扱ってください。
特に、data-y が近い要素、または data-x の位置関係から左側ラベル・右側入力欄と推定できる要素は、同一項目として扱ってください。

入力値の扱い：

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

実データらしき値、個人名、電話番号、メールアドレス、住所、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*****

この画面の入力項目、表示項目、一覧項目をもとに、テーブル定義を作成してください。

以下を考慮してください。

- テーブル名
- カラム名
- データ型
- 初期値はNULL許可
- 主キー候補
- SQLite用 CREATE TABLE 文
- 必要に応じた初期データ INSERT 文

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

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

SQLカラムは、入力項目、表示専用項目、一覧テーブルの主要項目から作成してください。

ただし、以下はDB項目にしないでください。

- 操作ボタン
- 装飾要素
- ナビゲーション
- 広告
- ロゴ
- 外部リンク
- script
- style
- hiddenの機密値
- Cookie
- token
- password
- 認証情報
- セッションID
- CSRFトークン
- 一時的な画面制御値

一覧テーブルが存在する場合は、data-role="header-cell"、data-role="cell"、data-tag="th"、data-tag="td"、周辺ラベル、data-x / data-y / data-w / data-h から主要なDBカラムを推定してください。

検索画面の場合は、検索条件項目と一覧表示項目の両方を考慮してテーブル定義を作成してください。

編集画面の場合は、入力フォームを中心にテーブル定義を作成してください。

詳細画面の場合は、表示専用フィールドもDBカラム候補として扱ってください。

ダッシュボード画面の場合は、カード、集計値、一覧、フィルタ条件を識別し、業務データとして保存すべき項目のみDBカラム候補にしてください。

不明な項目は推定で補ってください。
推定した箇所は、必要に応じて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 は、WebAppClone の登録・更新・削除・検索処理に必要な場合があります。
そのため、解析用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のカラムフィールド名に置き換える。

セキュリティ上の注意：

- password型の値、token、cookie、認証情報、個人情報らしき実データは出力に含めないでください
- 実データはサンプル値または <#フィールド名> に置き換えてください
- 既存Webアプリの固有名称、ロゴ、商標、著作権性の高い文章は再利用しないでください
- 外部サービス名、会社名、商品名、ブランド名が業務上必要でない場合は、一般的な名称に置き換えてください

出力形式：

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

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

生成HTMLには、入力として渡された解析用HTMLをそのまま含めないでください。
必要に応じて、推定内容を説明する短いHTMLコメントのみを含めてください。

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