155 lines
5.3 KiB
HTML
155 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Voting Page</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #1a1a1a;
|
|
color: #9f9f9f;
|
|
}
|
|
.container {
|
|
width: 50em;
|
|
margin: 5em auto;
|
|
padding: 2em;
|
|
background-color: #2b2b2b;
|
|
border-radius: 0.3125em;
|
|
box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.1);
|
|
}
|
|
.election-card {
|
|
margin-bottom: 1.25em;
|
|
padding: 0.625em;
|
|
background-color: #3b3b3b;
|
|
border-radius: 0.3125em;
|
|
box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.1);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.item {
|
|
margin-bottom: 0.625em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item input[type="checkbox"] {
|
|
margin-right: 0.625em;
|
|
background-color: #2b2b2b;
|
|
color: #9f9f9f;
|
|
}
|
|
button {
|
|
margin-left: 0.625em;
|
|
padding: 0.625em;
|
|
border: 0px;
|
|
border-radius: 0.3125em;
|
|
box-sizing: border-box;
|
|
background-color: #1a75ff; /* Darker blue */
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #145cbf; /* Even darker blue */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>Voting Page</h2>
|
|
<!-- User cards will be inserted here dynamically -->
|
|
<div id="usersContainer"></div>
|
|
</div>
|
|
<script>
|
|
const items = [
|
|
{ id: 1, name: "Item 1" },
|
|
{ id: 2, name: "Item 2" },
|
|
{ id: 3, name: "Item 3" }
|
|
// Add more items as needed
|
|
];
|
|
|
|
const users = [
|
|
{ id: 1, name: "User 1" },
|
|
{ id: 2, name: "User 2" },
|
|
{ id: 3, name: "User 3" }
|
|
// Add more users as needed
|
|
];
|
|
|
|
const usersContainer = document.getElementById("usersContainer");
|
|
|
|
users.forEach(user => {
|
|
const userCard = document.createElement("div");
|
|
userCard.className = "election-card";
|
|
userCard.innerHTML = `
|
|
<h3>${user.name}</h3>
|
|
<div class="selectedItemsContainer"></div>
|
|
<h3>Unselected Items</h3>
|
|
<div class="unselectedItemsContainer">
|
|
${items.map(item => `
|
|
<div class="item" id="item${user.id}-${item.id}">
|
|
<input type="checkbox" id="checkbox${user.id}-${item.id}" onchange="toggleSelection('${user.id}-${item.id}')">
|
|
<label for="checkbox${user.id}-${item.id}">${item.name}</label>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
<button onclick="submitVote(${user.id})">Submit Vote</button>
|
|
`;
|
|
usersContainer.appendChild(userCard);
|
|
});
|
|
|
|
function moveUp(itemId) {
|
|
const item = document.getElementById(`item${itemId}`);
|
|
const previousItem = item.previousElementSibling;
|
|
if (previousItem) {
|
|
item.parentNode.insertBefore(item, previousItem);
|
|
}
|
|
}
|
|
|
|
function moveDown(itemId) {
|
|
const item = document.getElementById(`item${itemId}`);
|
|
const nextItem = item.nextElementSibling;
|
|
if (nextItem) {
|
|
item.parentNode.insertBefore(nextItem, item);
|
|
}
|
|
}
|
|
|
|
function toggleSelection(itemId) {
|
|
const item = document.getElementById(`item${itemId}`);
|
|
const checkbox = item.querySelector(`input[type="checkbox"]`);
|
|
const userCard = item.parentNode.parentNode;
|
|
const selectedItemsContainer = userCard.querySelector('.selectedItemsContainer');
|
|
const unselectedItemsContainer = userCard.querySelector('.unselectedItemsContainer');
|
|
|
|
if (checkbox.checked) {
|
|
const upButton = document.createElement('button');
|
|
upButton.onclick = function() { moveUp(itemId); };
|
|
upButton.textContent = 'Up';
|
|
|
|
const downButton = document.createElement('button');
|
|
downButton.onclick = function() { moveDown(itemId); };
|
|
downButton.textContent = 'Down';
|
|
|
|
item.appendChild(upButton);
|
|
item.appendChild(downButton);
|
|
|
|
selectedItemsContainer.appendChild(item);
|
|
} else {
|
|
const buttons = item.querySelectorAll('button');
|
|
buttons.forEach(button => button.remove());
|
|
|
|
unselectedItemsContainer.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function submitVote(userId) {
|
|
const userCard = document.querySelector(`#user${userId}`);
|
|
const selectedItemsContainer = userCard.querySelector('.selectedItemsContainer');
|
|
const selectedItems = Array.from(selectedItemsContainer.children)
|
|
.map(item => item.id.split('-')[1]); // Get the item id
|
|
|
|
// Implement the logic to submit the vote with the selected items
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |