<div class="top-buttons">
    <button id="toggleControlsButton">設定を隠す</button>
    <button id="helpButton">ヘルプ</button>
</div>

<div class="controls" id="controlPanel">
    <h3>画像設定</h3>
    <div class="control-group">
        <label for="imageUpload">画像ファイル (透過PNG、複数可):</label>
        <input type="file" id="imageUpload" multiple accept="image/png">

        <label for="maxParticleSize">画像の最大サイズ:</label>
        <input type="range" id="maxParticleSize" min="10" max="50" step="1" value="10">
        <span id="maxParticleSizeValue">10</span> </div>

    <h3>傾斜設定</h3> <div class="control-group">
        <label for="domeTilt">傾斜角度 (度): <span id="domeTiltValue">0</span></label>
        <input type="range" id="domeTilt" min="-90" max="90" step="1" value="0">
    </div>

    <h3>アニメーション設定</h3>
    <div class="control-group">
        <label for="bgColor">背景色:</label>
        <input type="color" id="bgColor" value="#000000"> <label for="particleCount">表示数 (目安):</label>
        <input type="number" id="particleCount" value="100" min="10" max="500">

        <label for="fallSpeed">降る速さ (3D空間単位/フレーム): <span id="fallSpeedValue">1</span></label>
        <input type="range" id="fallSpeed" min="0.1" max="5" step="0.1" value="1">

        <label for="rotationSpeed">回転速さ (度/フレーム): <span id="rotationSpeedValue">1</span></label>
        <input type="range" id="rotationSpeed" min="0" max="10" step="0.1" value="1">

        <label for="perspectiveStrength">遠近感の強さ: <span id="perspectiveStrengthValue">1.5</span></label>
        <input type="range" id="perspectiveStrength" min="0.1" max="3" step="0.1" value="1.5">
        <small>値が大きいほど遠近感が強調されます。</small>

        <label for="fadeOutHeight">フェードアウト開始高さ (3D空間単位): <span id="fadeOutHeightValue">0</span></label>
        <input type="range" id="fadeOutHeight" min="0" max="100" step="1" value="0">
        <small>この高さより下で徐々に透明になります。0でフェードアウトなし。</small>
        </div>

    <h3>動画保存設定</h3>
    <div class="control-group">
        <label for="recWidth">解像度 幅:</label>
        <input type="number" id="recWidth" value="1920">
        <label for="recHeight">解像度 高さ:</label>
        <input type="number" id="recHeight" value="1920">
        <small>ドームマスターは通常正方形です。</small>

        <label for="recFps">フレームレート (FPS):</label>
        <input type="number" id="recFps" value="30" min="1" max="60">

        <label for="recDuration">録画時間 (秒):</label>
        <input type="number" id="recDuration" value="10" min="1">

        <label for="fadeInDuration">フェードイン時間 (秒):</label>
        <input type="number" id="fadeInDuration" value="1" min="0">

        <label for="fadeOutDuration">フェードアウト時間 (秒):</label>
        <input type="number" id="fadeOutDuration" value="1" min="0">

        <label for="recordDelay">録画開始延滞 (秒):</label>
        <input type="number" id="recordDelay" value="0" min="0">

        <button id="startRecording">録画開始</button>
        <button id="stopRecording" disabled>録画停止</button>
        <div id="status"></div>
        <a id="downloadLink" style="display:none;"></a>
    </div>
</div>

<canvas id="snowCanvas"></canvas>

<div class="help-overlay" id="helpOverlay">
    <div class="help-content">
        <button class="close-help" id="closeHelpButton">&times;</button>
        <h3>これは何？</h3>
        <p>ドームの天頂から雪が降るように画像を降らせた映像を生成するツールです。プラネタリウムやドームシアターで投影できるようにドームマスター形式で動画出力できます。</p>
        <h3>使い方</h3>
        <p><b>画像設定</b>：ファイルを選択し、サイズを設定します。ファイルが透過PNGを想定しています。</p>
        <p><b>傾斜設定</b>：ドーム傾斜や進行方向に合わせて傾斜角を設定します。</p>
        <p><b>アニメーション設定</b>：背景色、表示数、落下速度、回転速度、遠近感の強さ、フェードアウト開始高さを指定します。</p>
        <p><b>動画保存設定</b>：解像度、フレームレート、録画時間、前後のフェードイン・フェードアウト時間を設定し、録画開始ボタンで録画が始まります。</p>
        <p class="copyright">Snow Effect Generator for Dome v1.0 | (c) <a href="https://researchmap.jp/estherian" target="_blank">Tasuku Yoshioka</a> (<a href="https://www.tsm.toyama.toyama.jp/" target="_blank">Toyama Science Museum</a>), 2025 | Released under the <a href="https://opensource.org/license/mit" target="_blank">MIT license</a></p>
    </div>
</div>