<!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>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
            min-height: 100vh;
            padding: 30px;
            color: #333;
        }

        h3 {
            font-size: 1.5em;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .tab {
            display: flex;
            background: #2c3e50;
            border-bottom: 1px solid #34495e;
        }

        .tab button {
            flex: 1;
            padding: 15px;
            background: none;
            border: none;
            color: #ecf0f1;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
        }

        .tab button:hover {
            background: #34495e;
        }

        .tab button.active {
            background: #3498db;
            color: #fff;
        }

        .tabcontent {
            display: none;
            padding: 30px;
            background: #fff;
        }

        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 15px;
        }

        label {
            flex: 0 0 200px;
            font-weight: 700;
            color: #2c3e50;
        }

        input, select, textarea {
            flex: 1;
            max-width: 300px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        input:focus, select:focus, textarea:focus {
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
            outline: none;
        }

        textarea {
            resize: vertical;
            min-height: 80px;
        }

        .dynamic-fields {
            margin-left: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
        }

        #codeOutput {
            width: 100%;
            max-width: 940px;
            height: 400px;
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: 'Noto Sans JP', monospace;
            background: #f9f9f9;
            color: #333;
            box-sizing: border-box;
        }

        #messageArea {
            width: 100%;
            max-width: 940px;
            margin: 15px 0;
            padding: 10px;
            background: #dff0d8;
            color: #3c763d;
            border-radius: 8px;
            text-align: center;
            box-sizing: border-box;
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        button {
            padding: 12px 25px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            border: none;
            border-radius: 8px;
            color: #fff;
            font-size: 1em;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        button:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .filter-mode-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .filter-mode-buttons {
            display: flex;
            gap: 10px;
        }

        .filter-mode-btn {
            padding: 10px 20px;
            background: #ecf0f1;
            border: none;
            border-radius: 8px;
            color: #2c3e50;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
        }

        .filter-mode-btn.active {
            background: #3498db;
            color: #fff;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            width: 100%;
        }

        .filter-card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .filter-card:hover {
            transform: translateY(-2px);
        }

        .filter-card input[type="checkbox"] {
            display: none;
        }

        .filter-label {
            display: block;
            font-weight: 700;
            color: #2c3e50;
            cursor: pointer;
            padding: 10px;
            border-radius: 5px;
            background: #fff;
            transition: background 0.3s;
        }

        .filter-card input[type="checkbox"]:checked + .filter-label {
            background: #3498db;
            color: #fff;
        }

        .filter-params {
            margin-top: 10px;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }

        .filter-params.active {
            max-height: 500px;
        }

        .filter-params .form-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 10px;
        }

        .filter-params label {
            flex: none;
            width: auto;
            font-weight: 500;
        }

        .filter-params input,
        .filter-params select {
            max-width: 100%;
        }

        .logic-desc-panel {
            margin: 15px 0;
            padding: 15px;
            background: #f0f9ff;
            border-radius: 8px;
            border: 1px solid #b3d4fc;
            color: #2c3e50;
            font-size: 0.95em;
            line-height: 1.5;
            display: none;
        }

        .logic-desc-panel.active {
            display: block;
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .tooltiptext {
            visibility: hidden;
            width: 200px;
            background: #2c3e50;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        @media (max-width: 768px) {
            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }
            label {
                flex: none;
            }
            input, select, textarea {
                max-width: 100%;
            }
            .tab button {
                font-size: 0.9em;
                padding: 10px;
            }
            #codeOutput, #messageArea {
                max-width: 100%;
            }
            .filter-grid {
                grid-template-columns: 1fr;
            }
        }
/* 既存のスタイルがある場合はその後に追加 */
/* 既存のスタイルがある場合はその後に追加 */
.action-buttons {
    margin: 15px 0;
    margin-right: 15px; /* 右側に隙間を追加 */
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 15px; /* ボタン間の間隔 */
}

#saveButton, #loadButton {
    width: 120px; /* ボタン幅を統一 */
    padding: 8px 0; /* 上下のパディングを均等に */
    font-size: 14px;
    text-align: center; /* テキストを中央揃え */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s;
}

#saveButton {
    background-color: #4CAF50; /* 緑系のボタンカラー */
}

#saveButton:hover {
    background-color: #45a049; /* ホバー時の色 */
}

#loadButton {
    background-color: #2196F3; /* 青系のボタンカラー */
}

#loadButton:hover {
    background-color: #1e87db; /* ホバー時の色 */
}
    </style>
</head>
<body>
    <div class="container">
        <div class="tab">
            <button class="tablinks" onclick="openTab(event, 'Basic')">基本設定</button>
            <button class="tablinks" onclick="openTab(event, 'OpenLogic')">オープンロジック</button>
            <button class="tablinks" onclick="openTab(event, 'FilterLogic')">フィルターロジック</button>
            <button class="tablinks" onclick="openTab(event, 'CloseLogic')">クローズロジック</button>
            <button class="tablinks" onclick="openTab(event, 'CodeGen')">コード生成</button>
        </div>

        <!-- 保存と読み込みボタン -->
        <div class="action-buttons">
            <button id="saveButton">設定を保存</button>
            <button id="loadButton">設定を読み込む</button>
            <input type="file" id="loadFile" accept=".json" style="display: none;">
        </div>

        <!-- 基本設定タブ -->
        <div id="Basic" class="tabcontent">
            <h3>基本設定</h3>
            <div class="form-group">
                <label for="eaName">EA名 (必須):</label>
                <input type="text" id="eaName" value="MyStrategy" required>
            </div>
            <div class="form-group">
                <label for="description">説明:</label>
                <textarea id="description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="lotSize">ロットサイズ (必須, >0):</label>
                <input type="number" id="lotSize" step="0.01" min="0.01" value="0.1" required>
            </div>
            <div class="form-group">
                <label for="currencyPair">通貨ペア:</label>
                <select id="currencyPair">
                    <option value="" selected>現在のチャート</option>
                    <option value="EURUSD">EURUSD</option>
                    <option value="USDJPY">USDJPY</option>
                    <option value="GBPUSD">GBPUSD</option>
                    <option value="AUDUSD">AUDUSD</option>
                    <option value="USDCAD">USDCAD</option>
                    <option value="USDCHF">USDCHF</option>
                    <option value="NZDUSD">NZDUSD</option>
                    <option value="EURJPY">EURJPY</option>
                    <option value="GBPJPY">GBPJPY</option>
                </select>
            </div>
            <div class="form-group">
                <label for="stopLoss">ストップロス (pips):</label>
                <input type="number" id="stopLoss" step="1" min="0" value="100">
            </div>
            <div class="form-group">
                <label for="takeProfit">テイクプロフィット (pips):</label>
                <input type="number" id="takeProfit" step="1" min="0" value="100">
            </div>
            <div class="form-group">
                <label for="maxSpread">最大スプレッド (pips):</label>
                <input type="number" id="maxSpread" step="1" min="0" value="5">
            </div>
            <div class="form-group">
                <label for="maxSlippage">最大スリッページ (pips):</label>
                <input type="number" id="maxSlippage" step="1" min="0" value="3">
            </div>
            <div class="form-group">
                <label for="trailingStop">トレーリングストップ (pips):</label>
                <input type="number" id="trailingStop" step="1" min="0" value="30">
            </div>
            <div class="form-group">
                <label for="trailingStopMode">トレーリングストップモード:</label>
                <select id="trailingStopMode">
                    <option value="TS_NONE" selected>使用しない</option>
                    <option value="TS_NORMAL">ノーマル</option>
                    <option value="TS_AFTER_BE">ブレークイーブン後作動</option>
                    <option value="TS_BE_ONLY">ブレークイーブンのみ</option>
                </select>
            </div>
            <div class="form-group">
                <label for="breakEven">ブレークイーブン (pips):</label>
                <input type="number" id="breakEven" step="1" min="0" value="20">
            </div>
            <div class="form-group">
                <label for="maxPositions">最大ポジション数:</label>
                <input type="number" id="maxPositions" step="1" min="1" value="1">
            </div>
            <div class="form-group">
                <label for="allowHedging">両建て許可:</label>
                <select id="allowHedging">
                    <option value="false" selected>いいえ</option>
                    <option value="true">はい</option>
                </select>
            </div>
        </div>

        <!-- オープンロジックタブ -->
        <div id="OpenLogic" class="tabcontent">
            <h3>オープンロジック</h3>
            <div class="form-group">
                <label for="openIndicator">テクニカル指標を選択:</label>
                <select id="openIndicator" onchange="showOpenParams()" class="tooltip">
                    <option value="" data-desc="選択してください: ポジションを開く条件を選択します">選択してください</option>
                    <option value="maCross" data-desc="移動平均線クロス: 短期MAが長期MAをクロスしたときにエントリー">移動平均線クロス</option>
                    <option value="adxCross" data-desc="ADX (+DI/-DIクロス): +DIと-DIが交差したときにエントリー">ADX (+DI/-DIクロス)</option>
                    <option value="bbTouch" data-desc="ボリンジャーバンドタッチ: 価格がバンドに触れたときにエントリー">ボリンジャーバンドタッチ</option>
                    <option value="cci" data-desc="CCI: CCIが指定レベルを超えたときにエントリー">CCI</option>
                    <option value="envelope" data-desc="エンベロープタッチ: 価格がエンベロープに触れたときにエントリー">エンベロープタッチ</option>
                    <option value="macd" data-desc="MACD: MACDラインがシグナルラインをクロスまたはゼロを突破したときにエントリー">MACD</option>
                    <option value="rsi" data-desc="RSI: RSIが上限/下限を超えたときにエントリー">RSI</option>
                    <option value="stochastic" data-desc="ストキャスティクス: K線がD線をクロスまたはレベルを超えたときにエントリー">ストキャスティクス</option>
                    <option value="williamsR" data-desc="ウィリアムズ%R: %Rが上限を超えたときにエントリー">ウィリアムズ%R</option>
                    <option value="rvi" data-desc="RVI: RVIがシグナルラインをクロスしたときにエントリー">RVI</option>
                    <option value="lowTouch" data-desc="安値タッチ: 指定期間の安値に触れたときにエントリー">安値タッチ</option>
                    <option value="highTouch" data-desc="高値タッチ: 指定期間の高値に触れたときにエントリー">高値タッチ</option>
                    <option value="timeEntry" data-desc="指定時間エントリー: 指定時刻にエントリー">指定時間エントリー</option>
                </select>
            </div>
            <div id="openLogicDesc" class="logic-desc-panel"></div>
            <div id="openParams" class="dynamic-fields"></div>
        </div>

        <!-- フィルターロジックタブ -->
        <div id="FilterLogic" class="tabcontent">
            <h3>フィルターロジック</h3>
            <div class="form-group filter-mode-group">
                <label>フィルターモード:</label>
                <div class="filter-mode-buttons">
                    <button type="button" class="filter-mode-btn active" data-mode="AND">すべての条件が合致 (AND)</button>
                    <button type="button" class="filter-mode-btn" data-mode="OR">いずれかの条件が合致 (OR)</button>
                    <input type="hidden" id="filterMode" name="filterMode" value="AND">
                </div>
            </div>
            <div class="form-group">
                <label>フィルター指標:</label>
                <div class="filter-grid">
                    <div class="filter-card">
                        <input type="checkbox" id="rsiFilter" onchange="toggleFilterParams('rsi')">
                        <label for="rsiFilter" class="filter-label tooltip">RSI<span class="tooltiptext">RSIが特定条件を満たすときにエントリーをフィルタリング</span></label>
                        <div id="rsiParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="maSlopeFilter" onchange="toggleFilterParams('maSlope')">
                        <label for="maSlopeFilter" class="filter-label tooltip">移動平均線の傾き<span class="tooltiptext">MAの傾き方向でエントリーを制限</span></label>
                        <div id="maSlopeParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="maCandleFilter" onchange="toggleFilterParams('maCandle')">
                        <label for="maCandleFilter" class="filter-label tooltip">移動平均線とロウソク足の位置関係<span class="tooltiptext">MAとローソク足の位置でフィルタリング</span></label>
                        <div id="maCandleParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="maRelationFilter" onchange="toggleFilterParams('maRelation')">
                        <label for="maRelationFilter" class="filter-label tooltip">2本の移動平均線の位置関係<span class="tooltiptext">2本のMAの関係でエントリーを制限</span></label>
                        <div id="maRelationParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="heikinAshiFilter" onchange="toggleFilterParams('heikinAshi')">
                        <label for="heikinAshiFilter" class="filter-label tooltip">平均足<span class="tooltiptext">平均足のトレンドでフィルタリング</span></label>
                        <div id="heikinAshiParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="adxLevelFilter" onchange="toggleFilterParams('adxLevel')">
                        <label for="adxLevelFilter" class="filter-label tooltip">ADXのレベル<span class="tooltiptext">ADXの強さでエントリーを制限</span></label>
                        <div id="adxLevelParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="adxSlopeFilter" onchange="toggleFilterParams('adxSlope')">
                        <label for="adxSlopeFilter" class="filter-label tooltip">ADXの傾き<span class="tooltiptext">ADXの傾き方向でフィルタリング</span></label>
                        <div id="adxSlopeParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="adxDIRelationFilter" onchange="toggleFilterParams('adxDIRelation')">
                        <label for="adxDIRelationFilter" class="filter-label tooltip">ADX (+DI/-DIの位置関係)<span class="tooltiptext">+DIと-DIの関係でエントリーを制限</span></label>
                        <div id="adxDIRelationParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="atrSlopeFilter" onchange="toggleFilterParams('atrSlope')">
                        <label for="atrSlopeFilter" class="filter-label tooltip">ATRの傾き<span class="tooltiptext">ATRの傾きでボラティリティをフィルタリング</span></label>
                        <div id="atrSlopeParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="atrLevelFilter" onchange="toggleFilterParams('atrLevel')">
                        <label for="atrLevelFilter" class="filter-label tooltip">ATRのレベル<span class="tooltiptext">ATRの値でボラティリティを制限</span></label>
                        <div id="atrLevelParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="stdDevSlopeFilter" onchange="toggleFilterParams('stdDevSlope')">
                        <label for="stdDevSlopeFilter" class="filter-label tooltip">Standard Deviationの傾き<span class="tooltiptext">標準偏差の傾きで変動性をフィルタリング</span></label>
                        <div id="stdDevSlopeParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="stdDevLevelFilter" onchange="toggleFilterParams('stdDevLevel')">
                        <label for="stdDevLevelFilter" class="filter-label tooltip">Standard Deviationのレベル<span class="tooltiptext">標準偏差の値で変動性を制限</span></label>
                        <div id="stdDevLevelParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="cciSlopeFilter" onchange="toggleFilterParams('cciSlope')">
                        <label for="cciSlopeFilter" class="filter-label tooltip">CCIの傾き<span class="tooltiptext">CCIの傾きで勢いをフィルタリング</span></label>
                        <div id="cciSlopeParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="cciLevelFilter" onchange="toggleFilterParams('cciLevel')">
                        <label for="cciLevelFilter" class="filter-label tooltip">CCIのレベル<span class="tooltiptext">CCIの値で勢いを制限</span></label>
                        <div id="cciLevelParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="macdLevelFilter" onchange="toggleFilterParams('macdLevel')">
                        <label for="macdLevelFilter" class="filter-label tooltip">MACDのレベル<span class="tooltiptext">MACDの値でトレンドをフィルタリング</span></label>
                        <div id="macdLevelParams" class="filter-params hidden"></div>
                    </div>
                    <div class="filter-card">
                        <input type="checkbox" id="bbWidthFilter" onchange="toggleFilterParams('bbWidth')">
                        <label for="bbWidthFilter" class="filter-label tooltip">ボリンジャーバンドの幅<span class="tooltiptext">バンド幅でボラティリティを制限</span></label>
                        <div id="bbWidthParams" class="filter-params hidden"></div>
                    </div>
                </div>
            </div>
            <div id="filterLogicDesc" class="logic-desc-panel"></div>
        </div>

        <!-- クローズロジックタブ -->
        <div id="CloseLogic" class="tabcontent">
            <h3>クローズロジック</h3>
            <div class="form-group">
                <label for="closeIndicator">クローズ条件を選択:</label>
                <select id="closeIndicator" onchange="showCloseParams()" class="tooltip">
                    <option value="" data-desc="選択してください: ポジションを閉じる条件を選択します">選択してください</option>
                    <option value="maCross" data-desc="移動平均線クロス: 短期MAが長期MAをクロスしたときにクローズ">移動平均線クロス</option>
                    <option value="adxCross" data-desc="ADX (+DI/-DIクロス): +DIと-DIが交差したときにクローズ">ADX (+DI/-DIクロス)</option>
                    <option value="bbTouch" data-desc="ボリンジャーバンドタッチ: 価格がバンドに触れたときにクローズ">ボリンジャーバンドタッチ</option>
                    <option value="cci" data-desc="CCI: CCIが指定レベルを超えたときにクローズ">CCI</option>
                    <option value="envelope" data-desc="エンベロープタッチ: 価格がエンベロープに触れたときにクローズ">エンベロープタッチ</option>
                    <option value="macd" data-desc="MACD: MACDラインがシグナルラインをクロスまたはゼロを突破したときにクローズ">MACD</option>
                    <option value="rsi" data-desc="RSI: RSIが上限/下限を超えたときにクローズ">RSI</option>
                    <option value="stochastic" data-desc="ストキャスティクス: K線がD線をクロスまたはレベルを超えたときにクローズ">ストキャスティクス</option>
                    <option value="williamsR" data-desc="ウィリアムズ%R: %Rが上限を超えたときにクローズ">ウィリアムズ%R</option>
                    <option value="rvi" data-desc="RVI: RVIがシグナルラインをクロスしたときにクローズ">RVI</option>
                    <option value="lowTouch" data-desc="安値タッチ: 指定期間の安値に触れたときにクローズ">安値タッチ</option>
                    <option value="highTouch" data-desc="高値タッチ: 指定期間の高値に触れたときにクローズ">高値タッチ</option>
                    <option value="timeClose" data-desc="指定時間クローズ: 指定時刻にポジションをクローズ">指定時間クローズ</option>
                </select>
            </div>
            <div id="closeLogicDesc" class="logic-desc-panel"></div>
            <div id="closeParams" class="dynamic-fields"></div>
        </div>

        <!-- コード生成タブ -->
        <div id="CodeGen" class="tabcontent">
            <h3>コード生成</h3>
            <div class="button-group">
                <button onclick="generateCode()">コード生成</button>
                <button onclick="copyToClipboard()">クリップボードにコピー</button>
                <button onclick="downloadCode()">ダウンロード (.mq4)</button>
            </div>
            <div id="messageArea"></div>
            <textarea id="codeOutput" readonly></textarea>
        </div>
    </div>

<script src="https://mt4trader.net/apli/ea-maker/ui.js"></script>
<script src="https://mt4trader.net/apli/ea-maker/logic.js"></script>
</body>
</html>