<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>パスワード保護ページ</title>
</head>
<body>
    <div id="passwordScreen">
        <h1>パスワードを入力してください</h1>
        <input type="password" id="passwordInput" placeholder="パスワード">
        <button onclick="checkPassword()">送信</button>
        <p id="errorMessage" style="color: red; display: none;">パスワードが間違っています</p>
    </div>

    <div id="formScreen" style="display: none;">
        <h1 id="formTitle">4wall用キャラクターjson</h1>
        <button onclick="toggleLanguage()">日本語/English</button>
        <form id="inputForm">
            <label for="input1" id="label1">画像のURL:</label>
            <input type="text" id="input1" name="input1"><br><br>
            
            <label for="input2" id="label2">キャラ名:</label>
            <input type="text" id="input2" name="input2"><br><br>
            
            <label for="input3" id="label3">説明:</label>
            <textarea id="input3" name="input3" rows="4" cols="20"></textarea><br><br>
            
            <label for="input4" id="label4">挨拶:</label>
            <textarea id="input4" name="input4" rows="4" cols="20"></textarea><br><br>
            
            <label for="fileName" id="labelFileName">保存ファイル名:</label>
            <input type="text" id="fileName" name="fileName" value="output.json"><br><br>
            
            <button type="button" id="convertButton" onclick="convertToJson()">変換</button>
        </form>

        <input type="file" id="fileInput" accept=".json" onchange="loadJsonFile()"><br><br>
        
        <p id="authorName">作者: waana.家名羅</p>
    </div>

    <script>
        let isJapanese = true;

        function checkPassword() {
            const password = document.getElementById('passwordInput').value;
            if (password === 'sonntyou') {
                document.getElementById('passwordScreen').style.display = 'none';
                document.getElementById('formScreen').style.display = 'block';
            } else {
                document.getElementById('errorMessage').style.display = 'block';
            }
        }

        function toggleLanguage() {
            isJapanese = !isJapanese;
            document.getElementById('formTitle').innerText = isJapanese ? '4wall用キャラクターjson' : 'Character JSON for 4wall';
            document.getElementById('label1').innerText = isJapanese ? '画像のURL:' : 'Image URL:';
            document.getElementById('label2').innerText = isJapanese ? 'キャラ名:' : 'Character Name:';
            document.getElementById('label3').innerText = isJapanese ? '説明:' : 'Description:';
            document.getElementById('label4').innerText = isJapanese ? '挨拶:' : 'Greeting:';
            document.getElementById('labelFileName').innerText = isJapanese ? '保存ファイル名:' : 'File Name:';
            document.getElementById('convertButton').innerText = isJapanese ? '変換' : 'Convert';
            document.getElementById('authorName').innerText = isJapanese ? '作者: waana.家名羅' : 'Author: waana.家名羅';
        }

        function convertToJson() {
            const input1 = document.getElementById('input1').value;
            const input2 = document.getElementById('input2').value;
            const input3 = document.getElementById('input3').value;
            const input4 = document.getElementById('input4').value;
            const fileName = document.getElementById('fileName').value || 'output.json';

            const data = {
                "data": {
                    "alternate_greetings": [],
                    "avatar": input1,
                    "description": input3,
                    "extensions": {
                        "depth_prompt": {
                            "depth": 0,
                            "prompt": ""
                        }
                    },
                    "first_mes": input4,
                    "name": input2,
                    "personality": "",
                    "tags": [
                        "Game Characters"
                    ]
                },
                "spec": "chara_card_v2",
                "spec_version": "2.0"
            };

            const jsonStr = JSON.stringify(data, null, 4);
            downloadJsonFile(jsonStr, fileName);
        }

        function downloadJsonFile(content, fileName) {
            const a = document.createElement('a');
            const file = new Blob([content], { type: 'application/json' });
            a.href = URL.createObjectURL(file);
            a.download = fileName;
            a.click();
        }

        function loadJsonFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = function(event) {
                const json = JSON.parse(event.target.result);
                document.getElementById('input1').value = json.data.avatar;
                document.getElementById('input2').value = json.data.name;
                document.getElementById('input3').value = json.data.description;
                document.getElementById('input4').value = json.data.first_mes;
            };

            reader.readAsText(file);
        }
    </script>
</body>
</html>
