milesrichardson/result.md

## result.md

      
    Raw
  

              result.md
            
          
    generated-from-mockup.mp4
    
  
## swap-items-between-list-by-openai.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Transfer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Additional styles if needed */
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="flex items-center justify-center space-x-4">
        <!-- Left List -->
        <div class="bg-white shadow rounded p-4">
            <ul id="leftList" class="space-y-2">
                <li><input type="checkbox" id="item1" value="Item 1"> <label for="item1">Item 1</label></li>
                <li><input type="checkbox" id="item2" value="Item 2"> <label for="item2">Item 2</label></li>
            </ul>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col space-y-2">
            <button id="moveRight" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Right</button>
            <button id="moveLeft" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Left</button>
        </div>

        <!-- Right List -->
        <div class="bg-white shadow rounded p-4">
            <ul id="rightList" class="space-y-2">
                <li><input type="checkbox" id="itemA" value="Item A"> <label for="itemA">Item A</label></li>
                <li><input type="checkbox" id="itemB" value="Item B"> <label for="itemB">Item B</label></li>
                <li><input type="checkbox" id="itemC" value="Item C"> <label for="itemC">Item C</label></li>
            </ul>
        </div>
    </div>

    <script>
        // JavaScript to handle moving items between lists
        const leftList = document.getElementById('leftList');
        const rightList = document.getElementById('rightList');
        const moveRight = document.getElementById('moveRight');
        const moveLeft = document.getElementById('moveLeft');

        moveRight.addEventListener('click', () => {
            moveSelectedItems(leftList, rightList);
        });

        moveLeft.addEventListener('click', () => {
            moveSelectedItems(rightList, leftList);
        });

        function moveSelectedItems(fromList, toList) {
            const selectedItems = Array.from(fromList.querySelectorAll('input[type="checkbox"]:checked'));
            selectedItems.forEach(item => {
                item.checked = false; // Uncheck the item
                toList.appendChild(item.closest('li')); // Move the entire list item
            });
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>List Transfer</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	/* Additional styles if needed */
	</style>
	</head>
	<body class="bg-gray-100 flex items-center justify-center h-screen">
	<div class="flex items-center justify-center space-x-4">
	<!-- Left List -->
	<div class="bg-white shadow rounded p-4">
	<ul id="leftList" class="space-y-2">
	<li><input type="checkbox" id="item1" value="Item 1"> <label for="item1">Item 1</label></li>
	<li><input type="checkbox" id="item2" value="Item 2"> <label for="item2">Item 2</label></li>
	</ul>
	</div>

	<!-- Action Buttons -->
	<div class="flex flex-col space-y-2">
	<button id="moveRight" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Right</button>
	<button id="moveLeft" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Left</button>
	</div>

	<!-- Right List -->
	<div class="bg-white shadow rounded p-4">
	<ul id="rightList" class="space-y-2">
	<li><input type="checkbox" id="itemA" value="Item A"> <label for="itemA">Item A</label></li>
	<li><input type="checkbox" id="itemB" value="Item B"> <label for="itemB">Item B</label></li>
	<li><input type="checkbox" id="itemC" value="Item C"> <label for="itemC">Item C</label></li>
	</ul>
	</div>
	</div>

	<script>
	// JavaScript to handle moving items between lists
	const leftList = document.getElementById('leftList');
	const rightList = document.getElementById('rightList');
	const moveRight = document.getElementById('moveRight');
	const moveLeft = document.getElementById('moveLeft');

	moveRight.addEventListener('click', () => {
	moveSelectedItems(leftList, rightList);
	});

	moveLeft.addEventListener('click', () => {
	moveSelectedItems(rightList, leftList);
	});

	function moveSelectedItems(fromList, toList) {
	const selectedItems = Array.from(fromList.querySelectorAll('input[type="checkbox"]:checked'));
	selectedItems.forEach(item => {
	item.checked = false; // Uncheck the item
	toList.appendChild(item.closest('li')); // Move the entire list item
	});
	}
	</script>
	</body>
	</html>