diff --git a/404.html b/404.html index eeede89c..0c73ff83 100644 --- a/404.html +++ b/404.html @@ -86,15 +86,10 @@
-

404

-

Page Not Found

-

- Sorry, but the page you were looking for could not be found. -

- +
diff --git a/Components/Buttons/Confetti-Button/index.html b/Components/Buttons/Confetti-Button/index.html new file mode 100644 index 00000000..24abb9cd --- /dev/null +++ b/Components/Buttons/Confetti-Button/index.html @@ -0,0 +1,17 @@ + + + + + + + + Confetti Button + + + + + + + + + diff --git a/Components/Buttons/Confetti-Button/script.js b/Components/Buttons/Confetti-Button/script.js new file mode 100644 index 00000000..fb5072f5 --- /dev/null +++ b/Components/Buttons/Confetti-Button/script.js @@ -0,0 +1,50 @@ +const confettiButton = document.querySelector('.confetti-button'); + +confettiButton.addEventListener('click', () => { + const confettiCount = 80; + const buttonRect = confettiButton.getBoundingClientRect(); + + for (let i = 0; i < confettiCount; i++) { + const confetti = document.createElement('div'); + confetti.classList.add('confetti'); + + // Assign random shapes and sizes for variety + const shapes = ['circle', 'square', 'triangle']; + const shape = shapes[Math.floor(Math.random() * shapes.length)]; + + if (shape === 'circle') { + confetti.style.width = confetti.style.height = '12px'; + confetti.style.borderRadius = '50%'; + } else if (shape === 'square') { + confetti.style.width = confetti.style.height = '10px'; + } else if (shape === 'triangle') { + confetti.style.width = 0; + confetti.style.height = 0; + confetti.style.borderLeft = '5px solid transparent'; + confetti.style.borderRight = '5px solid transparent'; + confetti.style.borderBottom = `10px solid hsl(${Math.random() * 360}, 100%, 50%)`; + } + + confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random confetti colors + confetti.style.left = `${buttonRect.left + buttonRect.width / 2}px`; // Start from center of button + confetti.style.top = `${buttonRect.top + buttonRect.height / 2}px`; // Start from center of button + + // Random direction for X and Y + confetti.style.setProperty('--x-direction', Math.random() - 0.5); // Horizontal spread + confetti.style.setProperty('--y-direction', Math.random() - 0.5); // Initial upward/downward motion + confetti.style.setProperty('--gravity', Math.random() * 1.2 + 0.4); // Simulate gravity to pull downward + + document.body.appendChild(confetti); + + // Confetti motion using GSAP + gsap.to(confetti, { + x: (Math.random() - 0.5) * 1200, // Spread horizontally + y: (Math.random() - 0.5) * 1200, // Spread vertically + rotation: Math.random() * 1440, // Spin confetti with more rotations + duration: 2 + Math.random(), // Randomized duration for each piece + opacity: 0, + scale: Math.random() * 1.5 + 0.5, // Randomize size slightly + onComplete: () => confetti.remove(), // Remove confetti after animation + }); + } +}); diff --git a/Components/Buttons/Confetti-Button/style.css b/Components/Buttons/Confetti-Button/style.css new file mode 100644 index 00000000..4b2b82cc --- /dev/null +++ b/Components/Buttons/Confetti-Button/style.css @@ -0,0 +1,60 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #282c34; + margin: 0; + overflow: hidden; +} + +.confetti-button { + font-size: 20px; + color: #fff; + background-color: #00b4d8; + border: none; + padding: 15px 30px; + border-radius: 50px; + cursor: pointer; + position: relative; + z-index: 2; + box-shadow: 0 8px 25px rgba(0, 180, 216, 0.5); + transition: background-color 0.3s ease; +} + +.confetti-button:hover { + background-color: #90e0ef; +} + +.confetti-button:active { + background-color: #0077b6; +} + +.confetti { + position: absolute; + width: 10px; + height: 20px; + border-radius: 2px; + pointer-events: none; + animation: fly 2.5s ease-out forwards; + z-index: 1; + opacity: 1; + transform-origin: center center; +} + +/* Rotation and motion animation */ +@keyframes fly { + 0% { + opacity: 1; + transform: translateY(0) translateX(0) rotate(0deg) scale(1); + } + + 50% { + transform: translateY(calc(400px * var(--y-direction))) translateX(calc(400px * var(--x-direction))) rotate(360deg) scale(1.2); + } + + 100% { + opacity: 0; + transform: translateY(calc(600px * var(--gravity))) translateX(calc(800px * var(--x-direction))) rotate(720deg) scale(0.8); + } +} diff --git a/Components/Buttons/Fizzy-Button/index.html b/Components/Buttons/Fizzy-Button/index.html new file mode 100644 index 00000000..e2b2362e --- /dev/null +++ b/Components/Buttons/Fizzy-Button/index.html @@ -0,0 +1,17 @@ + + + + + + + + Fizzy Button + + + + + + + + + diff --git a/Components/Buttons/Fizzy-Button/script.js b/Components/Buttons/Fizzy-Button/script.js new file mode 100644 index 00000000..9cfd85f1 --- /dev/null +++ b/Components/Buttons/Fizzy-Button/script.js @@ -0,0 +1,28 @@ +const button = document.querySelector('.fizzy-button'); + +button.addEventListener('click', () => { + const particleCount = 100; // Large number of particles for extra fizz + const bodyRect = document.body.getBoundingClientRect(); + + for (let i = 0; i < particleCount; i++) { + const particle = document.createElement('div'); + particle.classList.add('particle'); + particle.style.width = particle.style.height = `${Math.random() * 15 + 5}px`; + particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; + + // Particles can appear anywhere on the screen + particle.style.left = `${Math.random() * window.innerWidth}px`; + particle.style.top = `${Math.random() * window.innerHeight}px`; + + document.body.appendChild(particle); + + gsap.to(particle, { + x: (Math.random() - 0.5) * 1000, // Bigger spread for a wider fizz effect + y: (Math.random() - 0.5) * 1000, + duration: 2, + opacity: 0, + scale: Math.random() * 2.5 + 1, + onComplete: () => particle.remove(), + }); + } +}); diff --git a/Components/Buttons/Fizzy-Button/style.css b/Components/Buttons/Fizzy-Button/style.css new file mode 100644 index 00000000..650d800d --- /dev/null +++ b/Components/Buttons/Fizzy-Button/style.css @@ -0,0 +1,52 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #2b2d42; + margin: 0; + overflow: hidden; +} + +.fizzy-button { + font-size: 20px; + color: #fff; + background-color: #f72585; + border: none; + padding: 15px 30px; + border-radius: 50px; + cursor: pointer; + position: relative; + z-index: 2; + box-shadow: 0 8px 25px rgba(247, 37, 133, 0.5); + transition: background-color 0.3s ease; +} + +.fizzy-button:hover { + background-color: #ff4d6d; +} + +.fizzy-button:active { + background-color: #b5179e; +} + +.particle { + position: absolute; + background-color: #ff5722; + border-radius: 50%; + pointer-events: none; + animation: fizz 2s ease-out forwards; + z-index: 1; +} + +@keyframes fizz { + from { + transform: scale(0); + opacity: 1; + } + + to { + transform: scale(3); + opacity: 0; + } +} diff --git a/Components/Tables/Expandable-Row-Table/index.html b/Components/Tables/Expandable-Row-Table/index.html new file mode 100644 index 00000000..86dc58ab --- /dev/null +++ b/Components/Tables/Expandable-Row-Table/index.html @@ -0,0 +1,53 @@ + + + + + + + + Expandable Row Table + + + +

Expandable Row Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCity
John Doe ▶30New York
More about John: Loves coding, enjoys long walks.
Jane Smith ▶25Los Angeles
More about Jane: Enjoys hiking and outdoor activities.
Sam Brown ▶35Chicago
More about Sam: Loves photography and traveling.
+ + + + + diff --git a/Components/Tables/Expandable-Row-Table/script.js b/Components/Tables/Expandable-Row-Table/script.js new file mode 100644 index 00000000..2f4c15cf --- /dev/null +++ b/Components/Tables/Expandable-Row-Table/script.js @@ -0,0 +1,10 @@ +function toggleDetails(row) { + const nextRow = row.nextElementSibling; + const icon = row.querySelector('.expand-icon'); + + if (nextRow.classList.contains('details')) { + const isVisible = nextRow.style.display === 'table-row'; + nextRow.style.display = isVisible ? 'none' : 'table-row'; + icon.classList.toggle('open', !isVisible); + } +} diff --git a/Components/Tables/Expandable-Row-Table/style.css b/Components/Tables/Expandable-Row-Table/style.css new file mode 100644 index 00000000..fe0decb5 --- /dev/null +++ b/Components/Tables/Expandable-Row-Table/style.css @@ -0,0 +1,102 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f9; + color: #333; +} + +h2 { + text-align: center; + margin-top: 20px; + font-size: 2rem; + color: #444; +} + +table { + width: 80%; + margin: 30px auto; + border-collapse: collapse; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background-color: white; +} + +th, +td { + padding: 15px; + text-align: left; + font-size: 1rem; + border: 1px solid #ddd; +} + +th { + background-color: #4CAF50; + color: white; + font-size: 1.1rem; +} + +td { + background-color: #f9f9f9; +} + +td:first-child { + font-weight: bold; +} + +tr:hover { + background-color: #f1f1f1; + cursor: pointer; +} + +tr.details:hover { + background-color: #f9f9f9; +} + +.details { + display: none; + background-color: #f9f9f9; + font-style: italic; + color: #555; +} + +.details td { + padding-left: 40px; + background-color: #fafafa; +} + +.expand-icon { + margin-left: 10px; + font-size: 16px; + color: #4CAF50; +} + +.expand-icon.open { + transform: rotate(90deg); + transition: transform 0.3s ease; +} + +.expand-btn { + border: none; + background-color: #4CAF50; + color: white; + padding: 8px 16px; + font-size: 1rem; + border-radius: 4px; + cursor: pointer; +} + +.expand-btn:hover { + background-color: #45a049; +} + +.expand-btn:focus { + outline: none; +} + +@media (max-width: 768px) { + table { + width: 100%; + } +} diff --git a/Components/Tables/Interactive-Flip-Table/index.html b/Components/Tables/Interactive-Flip-Table/index.html new file mode 100644 index 00000000..f28f170a --- /dev/null +++ b/Components/Tables/Interactive-Flip-Table/index.html @@ -0,0 +1,53 @@ + + + + + + + + Interactive Flip Table + + + +

Interactive Flip Table

+
+
+
+
John Doe
25 years
+
New York
Likes coding
+
+
+
+
+
Jane Smith
30 years
+
Los Angeles
Enjoys hiking
+
+
+
+
+
Sam Brown
35 years
+
Chicago
Loves photography
+
+
+
+
+
Emily Davis
28 years
+
Miami
Enjoys painting
+
+
+
+
+
Michael Johnson
40 years
+
Houston
Plays guitar
+
+
+
+
+
Sarah Wilson
32 years
+
Phoenix
Likes cooking
+
+
+
+ + + diff --git a/Components/Tables/Interactive-Flip-Table/style.css b/Components/Tables/Interactive-Flip-Table/style.css new file mode 100644 index 00000000..22a6ad28 --- /dev/null +++ b/Components/Tables/Interactive-Flip-Table/style.css @@ -0,0 +1,109 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0 auto; + padding: px; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient(to bottom, #f8f9fa, #e9ecef); +} + +h2 { + margin-bottom: 20px; + color: #444; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); +} + +.table { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-rows: auto; + gap: 20px; + width: 100%; + max-width: 800px; + padding: 20px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid #ddd; + border-radius: 10px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); +} + +.card { + width: 100%; + height: 150px; + perspective: 1000px; + display: flex; + align-items: center; + justify-content: center; +} + +.card-inner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.6s ease-in-out; + transform-style: preserve-3d; +} + +.card:hover .card-inner { + transform: rotateY(180deg); +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border: 2px solid #ddd; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: bold; + color: #fff; + border-radius: 8px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); +} + +.card-front { + background: linear-gradient(135deg, #6a11cb, #2575fc); +} + +.card-back { + background: linear-gradient(135deg, #ff416c, #ff4b2b); + transform: rotateY(180deg); +} + +.card-front small, +.card-back small { + font-size: 12px; + font-weight: normal; + margin-top: 5px; + opacity: 0.8; +} + +@media (max-width: 768px) { + .card { + height: 130px; + } + + .card-front, + .card-back { + font-size: 14px; + } +} + +@media (max-width: 480px) { + .card { + height: 120px; + } + + .card-front, + .card-back { + font-size: 12px; + } +} diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html index 226e06c8..d04ef7a9 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html @@ -4,30 +4,33 @@ - Card Based Transfer List +
+

Card-Based Transfer List

+
-

Card Based Transfer List

-
-
-

Available Projects

-
- -
-
-
-

Assigned Projects

-
- -
-
+
+ +
+
Available Projects: 0
+
+
+ + + +
+
+ +
+
Assigned Projects: 0
+ - \ No newline at end of file + diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/script.js b/Components/Transfer-Lists/Card-Based-Transfer-List/script.js index 910a0aee..f0bed2f1 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/script.js +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/script.js @@ -1,70 +1,122 @@ -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' +document.addEventListener("DOMContentLoaded", () => { + const availableProjects = document.getElementById("availableProjects"); + const assignedProjects = document.getElementById("assignedProjects"); + const countAvailable = document.getElementById("countAvailable"); + const countAssigned = document.getElementById("countAssigned"); + const searchAvailable = document.getElementById("searchAvailable"); + const searchAssigned = document.getElementById("searchAssigned"); + const resetBtn = document.getElementById("reset"); + + const initialAvailableProjects = [ + 'Alpha', 'Beta', 'Gamma', 'Delta', + 'Epsilon', 'Zeta', 'Eta', 'Theta', + 'Iota', 'Kappa', 'Lambda', 'Mu', + 'Nu', 'Xi', 'Omicron', 'Pi' ]; + const initialAssignedProjects = []; // Starts empty - 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'); + const updateCounters = () => { + countAvailable.textContent = availableProjects.querySelectorAll(".card").length; + countAssigned.textContent = assignedProjects.querySelectorAll(".card").length; + }; + + const filterCards = (list, searchInput) => { + const filter = searchInput.value.toLowerCase(); + const cards = list.querySelectorAll(".card"); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(filter) ? "" : "none"; + }); + }; + + const resetLists = () => { + availableProjects.innerHTML = ''; + assignedProjects.innerHTML = ''; + + initialAvailableProjects.forEach(text => { + const card = createCard(text); + availableProjects.appendChild(card); }); - card.addEventListener('dragend', () => { - card.classList.remove('dragging'); + + // Assigned projects list starts empty + initialAssignedProjects.forEach(text => { + const card = createCard(text); + assignedProjects.appendChild(card); + }); + + attachEventListeners(); + updateCounters(); + }; + + const createCard = (text) => { + const card = document.createElement("div"); + card.className = "card"; + card.draggable = true; + card.textContent = text; + card.addEventListener("dragstart", dragStart); + card.addEventListener("dragend", dragEnd); + card.addEventListener("click", () => { + card.classList.toggle("selected"); }); return card; - } + }; + + const dragStart = (event) => { + event.target.classList.add("dragging"); + }; - function populateList(container, items) { - container.innerHTML = ''; - items.forEach(item => { - const card = createCard(item); - container.appendChild(card); + const dragEnd = (event) => { + event.target.classList.remove("dragging"); + updateCounters(); + }; + + const attachEventListeners = () => { + searchAvailable.addEventListener("input", () => { + filterCards(availableProjects, searchAvailable); + }); + + searchAssigned.addEventListener("input", () => { + filterCards(assignedProjects, searchAssigned); }); - } - - 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); -}); \ No newline at end of file + + const lists = document.querySelectorAll(".list"); + lists.forEach(list => { + list.addEventListener("dragover", e => { + e.preventDefault(); + }); + + list.addEventListener("drop", e => { + e.preventDefault(); + const draggedCard = document.querySelector(".dragging"); + if (draggedCard) { + list.appendChild(draggedCard); + updateCounters(); + } + }); + }); + }; + + const transferSelectedCards = (fromList, toList) => { + const selectedCards = [...fromList.querySelectorAll(".card.selected")]; + selectedCards.forEach(card => { + toList.appendChild(card); + card.classList.remove("selected"); + }); + updateCounters(); + }; + + const moveToAssignedBtn = document.getElementById("moveToAssigned"); + const moveToAvailableBtn = document.getElementById("moveToAvailable"); + + moveToAssignedBtn.addEventListener("click", () => { + transferSelectedCards(availableProjects, assignedProjects); + }); + + moveToAvailableBtn.addEventListener("click", () => { + transferSelectedCards(assignedProjects, availableProjects); + }); + + resetBtn.addEventListener("click", resetLists); + + resetLists(); +}); diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/style.css b/Components/Transfer-Lists/Card-Based-Transfer-List/style.css index 12809bd7..744b161f 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/style.css +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/style.css @@ -1,82 +1,138 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - font-family: 'Open Sans', sans-serif; - background: linear-gradient(to right, #ece9e6, #ffffff); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f4f4f9; display: flex; + flex-direction: column; 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; +header { text-align: center; + margin-bottom: 20px; } h1 { - font-family: 'Lobster', cursive; - color: #333; - margin-bottom: 40px; - font-size: 3em; + font-family: 'Roboto', sans-serif; /* Beautiful font */ + font-size: 2.5rem; + font-weight: 700; + color: #6a1b9a; /* Purple color */ + margin-bottom: 10px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */ } -.lists { +.container { display: flex; - justify-content: space-between; - align-items: center; + flex-direction: row; + gap: 20px; + align-items: flex-start; + flex-wrap: wrap; /* Allow items to wrap to the next line if needed */ + padding: 20px; + max-width: 1200px; /* Max width to limit the overall width */ + width: 100%; } .list-container { - flex: 1; - margin: 0 20px; - background: #fff; - border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + background-color: #ffffff; padding: 20px; - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); + border-radius: 10px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + flex: 1; /* Allow containers to grow and shrink as needed */ + min-width: 300px; /* Minimum width to prevent cramming */ + max-width: 100%; /* Ensure it does not exceed the container width */ } -.card-list { - display: flex; - flex-wrap: wrap; - gap: 20px; - justify-content: center; - padding: 20px; - border: 1px solid #ddd; - border-radius: 8px; - max-height: 400px; +.list { + width: 100%; + min-height: 250px; + border: 2px dashed #6a1b9a; /* Purple border */ + padding: 10px; + background-color: #f9f9f9; + border-radius: 10px; overflow-y: auto; - background: #fff; + margin-top: 10px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 10px; } .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 */ + background-color: #c465ff; + border: none; + color: white; + padding: 10px; + border-radius: 8px; + cursor: move; + text-align: center; /* Center the text horizontally */ + display: flex; + align-items: center; /* Center the text vertically */ + justify-content: center; /* Center the text horizontally */ + transition: transform 0.2s, background-color 0.2s; + overflow: hidden; /* Ensure text fits well inside */ } .card:hover { - background: #e0f7fa; + background-color: #a94cff; /* Slightly darker purple on hover */ + transform: scale(1.05); +} + +.card.selected { + background-color: #fdaee4; /* Keep selected color as is */ +} + +.buttons-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +button { + padding: 10px 15px; + cursor: pointer; + background-color: #6a1b9a; + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + transition: background-color 0.2s, transform 0.2s; +} + +button:hover { + background-color: #4a148c; /* Darker purple on hover */ + transform: scale(1.05); +} + +button:active { + background-color: #3d1a6b; /* Even darker purple on active */ } -.card.dragging { - opacity: 0.5; +input[type="text"] { + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 8px; + width: 100%; + transition: border-color 0.2s; } -.card-list.drop-zone { - background: #e0f7fa; -} \ No newline at end of file +input[type="text"]:focus { + outline: none; + border-color: #6a1b9a; /* Purple border on focus */ +} + +.list-container div { + margin-top: 5px; + font-weight: bold; + color: #555; +} diff --git a/assets/css_files/cursor.css b/assets/css_files/cursor.css index 974bb754..8b68028b 100644 --- a/assets/css_files/cursor.css +++ b/assets/css_files/cursor.css @@ -1,12 +1,11 @@ .circle { z-index: 10000; - width: 20px; - height: 20px; + width: 25px; + height: 25px; border-radius: 50%; pointer-events: none; animation: colors 5s infinite; position: fixed; - transform: translate(-50%, -50%); } .circle::before { @@ -15,6 +14,5 @@ width: 50px; height: 50px; opacity: 0.2; - transform: translate(-30%, -30%); border-radius: 50%; -} \ No newline at end of file +} diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 63981c5d..ef80a691 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -183,6 +183,19 @@

Celebration Button

+
+

Confetti Button

+
+ + + +
+
+ + + +
+

Delete Animation Button

@@ -222,6 +235,19 @@

Dynamic Hover Button

+
+

Fizzy Button

+
+ + + +
+
+ + + +
+

Flipside Button

diff --git a/assets/html_files/tables.html b/assets/html_files/tables.html new file mode 100644 index 00000000..8ad3456e --- /dev/null +++ b/assets/html_files/tables.html @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + Beautiify | Tables + + + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
Tables
+ + + +
+ +

Hmmm, we are not getting any result.
Our bad - Please try another search!

+
+ +
+
+

Expandable Row Table

+
+ + + +
+
+ + + +
+
+
+

Interactive Flip Table

+
+ + + +
+
+ + + +
+
+
+
+ + +
+ +
+ + + + + + + + + + diff --git a/index.html b/index.html index b1d193c9..6f1c2de9 100644 --- a/index.html +++ b/index.html @@ -277,6 +277,16 @@

Search Bars

+
+
+ +
+ +

Tables

+
+ +
+
@@ -380,4 +390,4 @@

Keep In Touch

- \ No newline at end of file + diff --git a/style.css b/style.css index 285c9e5c..f2fd5385 100644 --- a/style.css +++ b/style.css @@ -343,17 +343,41 @@ nav li { } nav li:hover { - border-bottom: 0.2rem rgb(116, 42, 113) solid; border-radius: 5px; transition: 0.3s ease-in-out; - background-color: #909192; - color: #df87ef; + background-color: #f9b3c7; } nav a { font-weight: bold; } +.nav-menu .nav-item .nav-link { + padding: 10px 5px; + position: relative; +} + +.nav-menu .nav-item .nav-link::after { + content: ''; + display: block; + width: 0; + height: 3.2px; + background: #FF5733; + transition: width 0.3s ease; + position: absolute; + left: 50%; + bottom: -5px; + transform: translateX(-50%); +} + +.nav-menu .nav-item .nav-link:hover { + color: #C70039; +} + +.nav-menu .nav-item .nav-link:hover::after { + width: 100%; +} + .logo { font-size: 2.3rem; font-weight: 700; @@ -1057,12 +1081,12 @@ footer { } .nav-item { - margin: 1.7rem 0; + margin: 1.5rem 0; font-size: 21px; } nav li:hover { - border-bottom: 0.4rem var(--light) solid; + border-bottom: 0.4rem white solid; transition: 0.3s ease-in-out; } @@ -1161,4 +1185,4 @@ footer { width: 280px !important; margin: 15px !important; } -} \ No newline at end of file +}