Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Card Based Transfer List #1326

Merged
merged 2 commits into from
Aug 10, 2024
Merged

Added Card Based Transfer List #1326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f592db
Added Card Based Transfer List
shraddhha Aug 3, 2024
db97cdd
Delete .history directory
Rakesh9100 Aug 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions Components/Transfer-Lists/Card-Based-Transfer-List/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container" id="available-list-container">
<h2>Available Projects</h2>
<div id="available-items" class="card-list">
<!-- Projects will be added here dynamically -->
</div>
</div>
<div class="list-container" id="selected-list-container">
<h2>Assigned Projects</h2>
<div id="selected-items" class="card-list">
<!-- Assigned projects will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
70 changes: 70 additions & 0 deletions Components/Transfer-Lists/Card-Based-Transfer-List/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
document.addEventListener('DOMContentLoaded', () => {
const availableItems = document.getElementById('available-items');
const selectedItems = document.getElementById('selected-items');
const availableListContainer = document.getElementById('available-list-container');
const selectedListContainer = document.getElementById('selected-list-container');

const projects = [
'Project Apollo',
'Project Zeus',
'Project Hera',
'Project Athena',
'Project Ares',
'Project Poseidon',
'Project Hades',
'Project Artemis',
'Project Demeter',
'Project Dionysus'
];

function createCard(text) {
const card = document.createElement('div');
card.classList.add('card');
card.textContent = text;
card.draggable = true;
card.addEventListener('dragstart', () => {
card.classList.add('dragging');
});
card.addEventListener('dragend', () => {
card.classList.remove('dragging');
});
return card;
}

function populateList(container, items) {
container.innerHTML = '';
items.forEach(item => {
const card = createCard(item);
container.appendChild(card);
});
}

function handleDrop(event) {
event.preventDefault();
const draggedCard = document.querySelector('.dragging');
const dropZone = event.currentTarget;
dropZone.classList.remove('drop-zone');
if (dropZone !== draggedCard.parentElement) {
dropZone.appendChild(draggedCard);
}
}

function handleDragOver(event) {
event.preventDefault();
event.currentTarget.classList.add('drop-zone');
}

function handleDragLeave(event) {
event.currentTarget.classList.remove('drop-zone');
}

availableListContainer.addEventListener('dragover', handleDragOver);
availableListContainer.addEventListener('dragleave', handleDragLeave);
availableListContainer.addEventListener('drop', handleDrop);

selectedListContainer.addEventListener('dragover', handleDragOver);
selectedListContainer.addEventListener('dragleave', handleDragLeave);
selectedListContainer.addEventListener('drop', handleDrop);

populateList(availableItems, projects);
});
82 changes: 82 additions & 0 deletions Components/Transfer-Lists/Card-Based-Transfer-List/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(to right, #ece9e6, #ffffff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background: #f0f0f0;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 90%;
max-width: 1200px;
text-align: center;
}

h1 {
font-family: 'Lobster', cursive;
color: #333;
margin-bottom: 40px;
font-size: 3em;
}

.lists {
display: flex;
justify-content: space-between;
align-items: center;
}

.list-container {
flex: 1;
margin: 0 20px;
background: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.card-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
max-height: 400px;
overflow-y: auto;
background: #fff;
}

.card {
background: #ffffff;
border: 1px solid #ddd;
border-radius: 12px;
padding: 20px;
width: 150px;
text-align: center;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
font-size: 1.2em;
font-weight: 600;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
user-select: none;
/* Prevent text selection during drag */
}

.card:hover {
background: #e0f7fa;
}

.card.dragging {
opacity: 0.5;
}

.card-list.drop-zone {
background: #e0f7fa;
}
16 changes: 15 additions & 1 deletion assets/html_files/transfer-lists.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,21 @@ <h1>Neumorphism Transfer List</h1>
</a>
</div>
</div>
<div class="box">
<h1>Card Based Transfer List</h1>
<div class="preview">
<a href="../../Components/Transfer-Lists/Card-Based-Transfer-List/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Transfer-Lists/Card-Based-Transfer-List" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
</div>

</section>

<!-- Scroll To Top Button -->
Expand All @@ -144,4 +158,4 @@ <h1>Neumorphism Transfer List</h1>
<script src="../js_files/progressBar.js"></script>
</body>

</html>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,4 +364,4 @@ <h2>Transfer Lists</h2>
<script src="./assets/js_files/progressBar.js"></script>
</body>

</html>
</html>