added some html mocs of the website

2024-05-12 23:52:29 +02:00
parent b2a0f85563
commit f035de1145
6 changed files with 561 additions and 37 deletions
@@ -0,0 +1,158 @@
+<!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 {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #1a1a1a;
+            color: #f4f4f4;
+        }
+        .container {
+            width: 600px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: #2b2b2b;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .election-card {
+            margin-bottom: 20px;
+            padding: 10px;
+            background-color: #3b3b3b;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .item {
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .item input[type="checkbox"] {
+            margin-right: 10px;
+            background-color: #2b2b2b;
+            color: #f4f4f4;
+        }
+        button {
+            margin-left: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            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>