<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗号化・復号化ツール</title>
    <link rel="apple-touch-icon" sizes="180x180" href="favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_package_v0.16/favicon-16x16.png">
<link rel="manifest" href="favicon_package_v0.16/site.webmanifest">
<link rel="mask-icon" href="favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="cipherCSS.css">
</head>
<body>
    <div class="container">
        <h1>暗号化・復号化ツール</h1>
        <div class="mode-selector">
            <label><input type="radio" name="mode" value="encrypt" checked onchange="changeMode()"> 暗号化</label>
            <label><input type="radio" name="mode" value="decrypt" onchange="changeMode()"> 復号化</label>
        </div>
        <div class="input-container">
            <textarea id="inputText" placeholder="ここにテキストを入力" autofocus></textarea>
            <button id="pasteBtn" onclick="pasteText()">ペースト</button>
            <button id="clearBtn" onclick="clearInput()">クリア</button>
        </div>
        <div class="password-container">
            <input type="password" id="password" placeholder="パスワードを入力">
            <span id="passwordNote" class="note">暗号化時に設定したパスワードを入力してください。</span>
        </div>
        <button id="processBtn" onclick="processText()">実行</button>
        <div class="output-container">
            <textarea id="outputText" placeholder="結果がここに表示されます" readonly></textarea>
            <button id="copyBtn" onclick="copyOutput()">コピー</button>
        </div>
    </div>
    <div id="notification" class="notification">出力をコピーしました！</div>
    <script src="cipherSCRIPT.min.js"></script>
</body>
</html>