<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MT4 EA Generator</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Kosugi&family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles -->
    <link href="styles.css" rel="stylesheet">
</head>
<body class="font-size-normal"> <!-- 初期フォントサイズクラスを設定 -->
    <div class="container">
        <!-- ヘッダー -->
        <div class="header">
            <h1>
                <svg class="robot-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                    <path d="M11 11V3a2 2 0 0 1 2-2v0a2 2 0 0 1 2 2v8" />
                </svg>
                MT4 EA Generator
            </h1>
            <div class="settings-group">
                <div class="setting-item">
                    <label for="fontFamily">フォント:</label>
                    <select id="fontFamily" onchange="updateFont()" aria-label="フォント選択">
                        <option value="font-sans">Sans-serif</option>
                        <option value="font-noto">Noto Sans JP</option>
                        <option value="font-yugothic">Yu Gothic</option>
                        <option value="font-kosugi">Kosugi</option>
                        <option value="font-sawarabi">Sawarabi Gothic</option>
                        <option value="font-serif">Serif</option>
                        <option value="font-mono">Monospace</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="fontSize">文字サイズ:</label>
                    <select id="fontSize" onchange="updateFontSize()" aria-label="文字サイズ選択">
                        <option value="font-size-small">小</option>
                        <option value="font-size-normal" selected>中</option>
                        <option value="font-size-large">大</option>
                    </select>
                </div>
                <button class="dark-mode-toggle" aria-label="ダークモード切替">
                    <i class="fas fa-moon"></i> ダークモード
                </button>
            </div>
        </div>

        <!-- タブ -->
        <div class="tabs">
            <button class="tab active" data-tab="basic"><i class="fas fa-cogs"></i> 基本設定</button>
            <button class="tab" data-tab="conditions"><i class="fas fa-list"></i> 取引条件</button>
            <button class="tab" data-tab="code"><i class="fas fa-code"></i> コード生成</button>
        </div>

        <!-- 基本設定タブ -->
        <div id="basic" class="tab-content active">
            <div class="form-row">
                <div class="input-group">
                    <label for="magicNumber">マジックナンバー:</label>
                    <input type="number" id="magicNumber" value="123456" aria-describedby="magicNumberHelp">
                    <small id="magicNumberHelp" class="form-text">EAを識別するためのユニークな番号です。</small>
                </div>
                <div class="input-group">
                    <label for="lotSize">ロットサイズ:</label>
                    <input type="number" id="lotSize" value="0.1" step="0.1" aria-describedby="lotSizeHelp">
                    <small id="lotSizeHelp" class="form-text">取引のロットサイズを設定します。</small>
                </div>
                <div class="input-group">
                    <label for="stopLoss">損切り幅(pips):</label>
                    <input type="number" id="stopLoss" value="50" aria-describedby="stopLossHelp">
                    <small id="stopLossHelp" class="form-text">損失を限定するための幅を設定します。</small>
                </div>
            </div>
            <div class="form-row">
                <div class="input-group">
                    <label for="takeProfit">利確幅(pips):</label>
                    <input type="number" id="takeProfit" value="100" aria-describedby="takeProfitHelp">
                    <small id="takeProfitHelp" class="form-text">利益確定の幅を設定します。</small>
                </div>
                <div class="input-group">
                    <label for="maxSpread">最大スプレッド(pips):</label>
                    <input type="number" id="maxSpread" value="3" aria-describedby="maxSpreadHelp">
                    <small id="maxSpreadHelp" class="form-text">許容する最大スプレッド幅を設定します。</small>
                </div>
                <div class="input-group">
                    <label for="slippage">許容スリッページ(pips):</label>
                    <input type="number" id="slippage" value="3" aria-describedby="slippageHelp">
                    <small id="slippageHelp" class="form-text">許容するスリッページの幅を設定します。</small>
                </div>
            </div>
            <div class="form-row">
                <div class="input-group">
                    <label for="trailingStopSetting">トレーリングストップの設定:</label>
                    <select id="trailingStopSetting" aria-label="トレーリングストップ設定選択">
                        <option value="0">使用しない</option>
                        <option value="1">ブレイクイーブンのみ</option>
                        <option value="2">ブレイクイーブン後作動</option>
                        <option value="3">即作動</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="trailingStop">トレーリングストップ幅(pips):</label>
                    <input type="number" id="trailingStop" value="20" aria-describedby="trailingStopHelp">
                    <small id="trailingStopHelp" class="form-text">トレーリングストップの幅を設定します。</small>
                </div>
                <div class="input-group">
                    <label for="breakEvenProfit">ブレイクイーブン利益(pips):</label>
                    <input type="number" id="breakEvenProfit" value="10" aria-describedby="breakEvenProfitHelp">
                    <small id="breakEvenProfitHelp" class="form-text">ブレイクイーブンに到達する利益幅を設定します。</small>
                </div>
            </div>
        </div>

        <!-- 取引条件タブ -->
        <div id="conditions" class="tab-content">
            <div class="conditions-group">
                <h3 class="section-title"><i class="fas fa-arrow-up"></i> 買い条件</h3>
                <button class="add-condition" onclick="addCondition('buy')"><i class="fas fa-plus"></i> 買い条件を追加</button>
                <div id="buyConditions"></div>
            </div>

            <div class="conditions-group">
                <h3 class="section-title"><i class="fas fa-arrow-down"></i> 売り条件</h3>
                <button class="add-condition" onclick="addCondition('sell')"><i class="fas fa-plus"></i> 売り条件を追加</button>
                <div id="sellConditions"></div>
            </div>

            <div class="conditions-group">
                <h3 class="section-title"><i class="fas fa-sign-out-alt"></i> クローズ買い条件</h3>
                <button class="add-condition" onclick="addCondition('closeBuy')"><i class="fas fa-plus"></i> クローズ買い条件を追加</button>
                <div id="closeBuyConditions"></div>
            </div>

            <div class="conditions-group">
                <h3 class="section-title"><i class="fas fa-sign-in-alt"></i> クローズ売り条件</h3>
                <button class="add-condition" onclick="addCondition('closeSell')"><i class="fas fa-plus"></i> クローズ売り条件を追加</button>
                <div id="closeSellConditions"></div>
            </div>
        </div>

        <!-- コード生成タブ -->
        <div id="code" class="tab-content">
            <div class="code-generation">
                <textarea class="code-area" readonly aria-label="生成されたEAコード"></textarea>
                <div class="button-group">
                    <button class="button generate-button" onclick="generateCode()"><i class="fas fa-play"></i> EA生成</button>
                    <button class="button copy-button" onclick="copyCode()"><i class="fas fa-copy"></i> コピー</button>
                    <button class="button download-button" onclick="downloadCode()"><i class="fas fa-download"></i> ダウンロード</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ローディングスピナー -->
    <div class="loading">
        <div class="loading-spinner"></div>
    </div>

    <!-- 通知 -->
    <div id="notification" class="notification"></div>

    <!-- プレビューページ -->
    <div id="previewWindow" class="preview-window">
        <button class="close-preview" onclick="closePreview()"><i class="fas fa-times"></i></button>
        <div id="previewContent"></div>
    </div>

    <!-- スクリプト -->
    <script src="script.js" defer></script>
</body>
</html>
