ちょっと試したいことがあるのでDOM作成をCopilotに作ってもらいました。
一発でここまでは出来ませんが、さすがにDOMぐらいだと外さないです。
人間相手だったら "それ、先に言ってもらえませんか！！！"って言われるほど
注文付けました・・・。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sortable Cards</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container mt-4"> <div id="controls" class="text-center mb-3"> <button id="sort-asc" class="btn btn-outline-primary shadow">昇 順</button> <button id="sort-desc" class="btn btn-outline-primary shadow">降 順</button> </div> <div id="card-container" class="list-group"></div> <div class="text-center mt-3"> <label class="switch"> <input type="checkbox" id="mode-switch"> <span class="slider round"></span> </label> <span>ライトモード/ダークモード</span> </div> <div class="text-center mt-3"> <button id="execute" class="btn btn-outline-primary shadow mx-2">実 行</button> <button id="cancel" class="btn btn-outline-primary shadow mx-2">キャンセル</button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script> <script src="script.js"></script> </body> </html>
syles.css
body.light-mode { background-color: #ffffff; color: #000000; } body.dark-mode { background-color: #333333; color: #ffffff; } body.light-mode .card { background-color: #ffffff; color: #000000; border-top: 2px solid #007bff; /* 境界をくっきり */ border-right: 2px solid #007bff; border-bottom: 2px solid #007bff; border-left: 2px solid #007bff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */ } body.dark-mode .card { background-color: #444444; color: #ffffff; border-top: 2px solid #ffffff; /* 境界をくっきり */ border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 影を追加 */ } body.light-mode .btn-outline-primary { color: #000000; /* ライトモードでは黒 */ border-color: #007bff; } body.dark-mode .btn-outline-primary { color: #ffffff; /* ダークモードでは白 */ border-color: #ffffff; } body.light-mode .btn-primary { background-color: #007bff; border-color: #007bff; color: #000000; /* ライトモードでは黒 */ } body.dark-mode .btn-primary { background-color: #0056b3; border-color: #0056b3; color: #ffffff; /* ダークモードでは白 */ } body.light-mode .slider { background-color: #ccc; } body.dark-mode .slider { background-color: #666; } body.light-mode .slider:before { background-color: #ffffff; } body.dark-mode .slider:before { background-color: #ffffff; } .card { cursor: move; border-radius: 1rem; /* 角の丸みを大きく */ text-align: center; /* 文字を中央に */ margin-bottom: 15px; /* カード間のマージンを大きく */ } .btn { border-radius: 1rem; /* ボタンの角の丸みを大きく */ width: 150px; /* ボタンの横幅を広げる */ } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; transition: .4s; border-radius: 50%; } input:checked + .slider:before { transform: translateX(26px); }
script.js
document.addEventListener('DOMContentLoaded', function () { var cardData = ['カード 1', 'カード 2', 'カード 3', 'カード 4']; var el = document.getElementById('card-container'); // カードを動的に生成 cardData.forEach(function (text) { var card = document.createElement('div'); card.className = 'card list-group-item shadow-sm rounded-lg'; card.textContent = text; el.appendChild(card); }); var sortable = Sortable.create(el, { animation: 150 }); document.getElementById('sort-asc').addEventListener('click', function () { sortCards(true); }); document.getElementById('sort-desc').addEventListener('click', function () { sortCards(false); }); function sortCards(ascending) { var cards = Array.from(el.children); cards.sort(function (a, b) { var textA = a.textContent.trim(); var textB = b.textContent.trim(); if (ascending) { return textA.localeCompare(textB, 'ja'); } else { return textB.localeCompare(textA, 'ja'); } }); cards.forEach(function (card) { el.appendChild(card); }); } var modeSwitch = document.getElementById('mode-switch'); modeSwitch.addEventListener('change', function () { if (modeSwitch.checked) { document.body.classList.add('dark-mode'); document.body.classList.remove('light-mode'); } else { document.body.classList.add('light-mode'); document.body.classList.remove('dark-mode'); } }); // 初期状態をライトモードに設定 document.body.classList.add('light-mode'); // 実行ボタンのイベントリスナーを追加 document.getElementById('execute').addEventListener('click', function () { alert('実行'); }); // キャンセルボタンのイベントリスナーを追加 document.getElementById('cancel').addEventListener('click', function () { alert('キャンセル'); }); });
ふう、もう自分要らないんじゃないかとすら思う。
