From 01a834fc65731e45fbf59dee6ca91856ad7bd2a7 Mon Sep 17 00:00:00 2001 From: Slavi Date: Mon, 7 Oct 2024 02:12:29 +0530 Subject: [PATCH 01/33] [Bug] Fix Gap Between Custom Cursor and Pointer #1384 --- assets/css_files/cursor.css | 49 +++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/assets/css_files/cursor.css b/assets/css_files/cursor.css index 974bb754..02562c4d 100644 --- a/assets/css_files/cursor.css +++ b/assets/css_files/cursor.css @@ -1,20 +1,55 @@ .circle { z-index: 10000; - width: 20px; - height: 20px; + width: 25px; + height: 25px; border-radius: 50%; pointer-events: none; - animation: colors 5s infinite; + animation: colors 4s ease-in-out infinite, pulse 2s infinite; position: fixed; transform: translate(-50%, -50%); + background: radial-gradient(circle, #FF6B6B, #3A0088); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); + transition: transform 0.15s ease-out, background-color 0.3s; } .circle::before { content: ""; position: fixed; - width: 50px; - height: 50px; - opacity: 0.2; + width: 70px; + height: 70px; + opacity: 0.15; transform: translate(-30%, -30%); border-radius: 50%; -} \ No newline at end of file + background: radial-gradient(circle, #FF6B6B, #3A0088); + filter: blur(10px); + transition: width 0.15s ease-out, height 0.15s ease-out, background-color 0.3s; +} + +/* Animation for changing colors */ +@keyframes colors { + 0% { + background-color: #FF6B6B; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); + } + 50% { + background-color: #3A0088; + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(58, 0, 136, 0.8); + } + 100% { + background-color: #FF6B6B; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); + } +} + +/* Pulse animation for smoother interactions */ +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} From 4bd6ad8f9af30ba07f955a31e3d3da0555bc9536 Mon Sep 17 00:00:00 2001 From: Slavi Date: Mon, 7 Oct 2024 02:19:44 +0530 Subject: [PATCH 02/33] [Style] Enhance the 404 error page #1208 --- 404.html | 265 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 172 insertions(+), 93 deletions(-) diff --git a/404.html b/404.html index 7c21816b..ddceaf24 100644 --- a/404.html +++ b/404.html @@ -14,49 +14,173 @@ Beautiify | Error 404 + -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

404

-

Page Not Found

-

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

- - - -
-
- - - -
- + +
- - - - - \ No newline at end of file + From f2d353286ac4f995296c33737771e72133380bd6 Mon Sep 17 00:00:00 2001 From: Slavi Date: Mon, 7 Oct 2024 02:38:22 +0530 Subject: [PATCH 03/33] Added Confetti button --- Components/Buttons/Confetti-Button/index.html | 125 ++++++++++++++++++ assets/html_files/buttons.html | 13 ++ 2 files changed, 138 insertions(+) create mode 100644 Components/Buttons/Confetti-Button/index.html diff --git a/Components/Buttons/Confetti-Button/index.html b/Components/Buttons/Confetti-Button/index.html new file mode 100644 index 00000000..d543f615 --- /dev/null +++ b/Components/Buttons/Confetti-Button/index.html @@ -0,0 +1,125 @@ + + + + + + Enhanced Confetti Button + + + + + + + + + diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index a5df56ee..93dfa4ff 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -141,6 +141,19 @@

Bat Button

+
+

Confetti Button

+
+ + + +
+
+ + + +
+

Blob Button

From b34022dc66a5bc079015e44c55c922c5a13269b2 Mon Sep 17 00:00:00 2001 From: Slavi Date: Mon, 7 Oct 2024 02:47:01 +0530 Subject: [PATCH 04/33] Enhanced the card based linked list #1380* --- .../Card-Based-Transfer-List/index.html | 39 ++-- .../Card-Based-Transfer-List/script.js | 178 +++++++++++------- .../Card-Based-Transfer-List/style.css | 157 ++++++++++----- 3 files changed, 241 insertions(+), 133 deletions(-) diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html index 226e06c8..24140da9 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html @@ -1,33 +1,32 @@ - - + Card Transfer List - 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..393fdb6e 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..fc972c91 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/style.css +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/style.css @@ -1,82 +1,139 @@ +/* Basic reset */ +* { + 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; /* Purple background */ + 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; /* Purple background */ + 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; +} From 56ef9a3438fabf0be5d1e531003512de2bea16fb Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 17:17:44 +0530 Subject: [PATCH 05/33] Added Confetti Button #1271* --- assets/html_files/buttons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 93dfa4ff..ff5f8216 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -149,7 +149,7 @@

Confetti Button

- +
From 23c3a2972ebbd1c8320c3f1dcace58529e4dde13 Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 18:02:37 +0530 Subject: [PATCH 06/33] Added Fizzy Button #1381* --- Components/Buttons/Fizzy Button/index.html | 96 ++++++++++++++++++++++ assets/html_files/buttons.html | 13 +++ 2 files changed, 109 insertions(+) create mode 100644 Components/Buttons/Fizzy Button/index.html diff --git a/Components/Buttons/Fizzy Button/index.html b/Components/Buttons/Fizzy Button/index.html new file mode 100644 index 00000000..885e6e7a --- /dev/null +++ b/Components/Buttons/Fizzy Button/index.html @@ -0,0 +1,96 @@ + + + + + + Extra Fizzy Button + + + + + + + + + diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index ff5f8216..a2b8898f 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -128,6 +128,19 @@

3D Button-2

+
+

Fizzy Button

+
+ + + +
+
+ + + +
+

Bat Button

From 085660e60bc394c275d9ab6ec10b213564696982 Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 18:06:31 +0530 Subject: [PATCH 07/33] Added fizzy button link --- assets/html_files/buttons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index a2b8898f..b0f4d1aa 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -136,7 +136,7 @@

Fizzy Button

- +
From 5ad6b47eff34c900d80531166d39b969f83d3f7a Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 20:59:37 +0530 Subject: [PATCH 08/33] Added Animated Hamburger Menu Button #1272* --- .../Buttons/Hamburger-menu-Button/index.html | 174 ++++++++++++++++++ assets/html_files/buttons.html | 13 ++ 2 files changed, 187 insertions(+) create mode 100644 Components/Buttons/Hamburger-menu-Button/index.html diff --git a/Components/Buttons/Hamburger-menu-Button/index.html b/Components/Buttons/Hamburger-menu-Button/index.html new file mode 100644 index 00000000..c9ac1d11 --- /dev/null +++ b/Components/Buttons/Hamburger-menu-Button/index.html @@ -0,0 +1,174 @@ + + + + + + Colorful Hamburger Menu Animation + + + + + +
+
+
+
+
+ + + + + + + + diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index b0f4d1aa..7ed3c722 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -167,6 +167,19 @@

Confetti Button

+
+

Hamburger Menu Button

+
+ + + +
+
+ + + +
+

Blob Button

From f76ae36f66630366a7aafb294495bd035ec9f50a Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 21:02:42 +0530 Subject: [PATCH 09/33] Added Animated Hamburger Menu Button link --- assets/html_files/buttons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 7ed3c722..2f936147 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -175,7 +175,7 @@

Hamburger Menu Button

- +
From e21bf576245e9df1dc3922f3c79f387e0fedb2d2 Mon Sep 17 00:00:00 2001 From: Slavi Date: Sat, 12 Oct 2024 21:31:43 +0530 Subject: [PATCH 10/33] Added Tables Category and a Component #628* --- Components/Tables/flip.html | 113 ++++++++++++++++++++++++++ Components/Tables/rowtab.html | 85 +++++++++++++++++++ assets/html_files/tables.html | 148 ++++++++++++++++++++++++++++++++++ index.html | 10 +++ 4 files changed, 356 insertions(+) create mode 100644 Components/Tables/flip.html create mode 100644 Components/Tables/rowtab.html create mode 100644 assets/html_files/tables.html diff --git a/Components/Tables/flip.html b/Components/Tables/flip.html new file mode 100644 index 00000000..a2c7189d --- /dev/null +++ b/Components/Tables/flip.html @@ -0,0 +1,113 @@ + + + + + + Interactive Flip Table + + + +

Interactive Flip Table

+
+
+
+
John Doe
30 years
+
New York
Likes coding
+
+
+
+
+
Jane Smith
25 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/rowtab.html b/Components/Tables/rowtab.html new file mode 100644 index 00000000..a71e6f84 --- /dev/null +++ b/Components/Tables/rowtab.html @@ -0,0 +1,85 @@ + + + + + + Expandable Row Table + + + +

Expandable Row Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCity
John Doe30New York
More about John: Loves coding, enjoys long walks.
Jane Smith25Los Angeles
More about Jane: Enjoys hiking and outdoor activities.
Sam Brown35Chicago
More about Sam: Loves photography and traveling.
+ + + + diff --git a/assets/html_files/tables.html b/assets/html_files/tables.html new file mode 100644 index 00000000..a21244ce --- /dev/null +++ b/assets/html_files/tables.html @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + Beautiify | Accordions + + + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
Tables
+ + + +
+ +

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

+
+ +
+
+

Interactive Flip Table

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

Expandable Row Table

+
+ + + +
+
+ + + +
+
+ +
+
+ + +
+ +
+ + + + + + + + + + diff --git a/index.html b/index.html index 3bf9d5a1..9c4306f6 100644 --- a/index.html +++ b/index.html @@ -277,6 +277,16 @@

Search Bars

+
+
+ +
+ +

Tables

+
+ +
+
From 023a3231882b1661fadd3a9cec00f2514dd0aa1a Mon Sep 17 00:00:00 2001 From: Slavi Date: Sun, 13 Oct 2024 00:15:22 +0530 Subject: [PATCH 11/33] Enhanced the hover effect of navbar #1217 --- index.html | 25 +++++++++++++------------ style.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 63 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 9c4306f6..48fe2fc3 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@ +
@@ -127,6 +128,16 @@

Accordions

+
+
+ +
+ +

Tables

+
+ +
+
@@ -277,16 +288,6 @@

Search Bars
-
-
- -
- -

Tables

-
- -
-
diff --git a/style.css b/style.css index 88cc15b4..00e16178 100644 --- a/style.css +++ b/style.css @@ -346,7 +346,7 @@ nav li:hover { border-bottom: 0.2rem rgb(116, 42, 113) solid; border-radius: 5px; transition: 0.3s ease-in-out; - background-color: #909192; + background-color: #f9b3c7; color: #df87ef; } @@ -1050,10 +1050,29 @@ footer { font-size: 21px; } + nav li { + margin: 0 15px; + } + + nav li a { + text-decoration: none; + color: white; + font-size: 16px; + font-weight: 500; + padding: 8px 15px; + transition: color 0.3s, background-color 0.3s; + border-radius: 4px; + } + nav li:hover { - border-bottom: 0.4rem var(--light) solid; + border-bottom: 0.4rem white solid; transition: 0.3s ease-in-out; } + + nav li:hover a { + color: white; + } + button#dark-mode-toggle { background-image: url('./assets/images/dark.png'); @@ -1147,4 +1166,32 @@ footer { width: 280px !important; margin: 15px !important; } -} \ No newline at end of file +} +.nav-menu .nav-item .nav-link { + color: #FF5733; /* Bright color for default state */ + text-decoration: none; /* Remove underline */ + padding: 10px 15px; /* Add some padding */ + position: relative; /* For positioning the underline */ + transition: color 0.3s ease; /* Smooth transition for color */ +} + +.nav-menu .nav-item .nav-link::after { + content: ''; /* Create a pseudo-element */ + display: block; + width: 0; /* Start with width 0 */ + height: 2px; /* Height of the underline */ + background: #FF5733; /* Bright color for underline */ + transition: width 0.3s ease; /* Smooth transition for width */ + position: absolute; + left: 50%; /* Center the underline */ + bottom: -5px; /* Position below the text */ + transform: translateX(-50%); /* Center adjustment */ +} + +.nav-menu .nav-item .nav-link:hover { + color: #C70039; /* Change text color on hover */ +} + +.nav-menu .nav-item .nav-link:hover::after { + width: 100%; /* Expand underline to full width on hover */ +} From 1e9310ee5863af05e847f18f78d739946ca0c091 Mon Sep 17 00:00:00 2001 From: Slavi Date: Sun, 13 Oct 2024 00:50:00 +0530 Subject: [PATCH 12/33] Minor fixes --- .../{Fizzy Button => FizzyButton}/index.html | 0 assets/html_files/tables.html | 4 ++-- index.html | 21 ++++++++++--------- 3 files changed, 13 insertions(+), 12 deletions(-) rename Components/Buttons/{Fizzy Button => FizzyButton}/index.html (100%) diff --git a/Components/Buttons/Fizzy Button/index.html b/Components/Buttons/FizzyButton/index.html similarity index 100% rename from Components/Buttons/Fizzy Button/index.html rename to Components/Buttons/FizzyButton/index.html diff --git a/assets/html_files/tables.html b/assets/html_files/tables.html index a21244ce..00477c9d 100644 --- a/assets/html_files/tables.html +++ b/assets/html_files/tables.html @@ -110,7 +110,7 @@

Interactive Flip Table
- +
@@ -123,7 +123,7 @@

Expandable Row Table

- +
diff --git a/index.html b/index.html index 48fe2fc3..92dc0063 100644 --- a/index.html +++ b/index.html @@ -128,16 +128,7 @@

Accordions

-
-
- -
- -

Tables

-
- -
-
+
@@ -288,6 +279,16 @@

Search Bars
+
+
+ +
+ +

Tables

+
+ +
+
From d33776db72f8e653b2bc0a4e3e1bf0f27297724d Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:29:46 +0530 Subject: [PATCH 13/33] Create style.css --- Components/Buttons/Confetti-Button/style.css | 60 ++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 Components/Buttons/Confetti-Button/style.css 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); + } +} From d526bced39c90b51c30df2b9cc73b6f97087e7b3 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:30:14 +0530 Subject: [PATCH 14/33] Create script.js --- Components/Buttons/Confetti-Button/script.js | 50 ++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 Components/Buttons/Confetti-Button/script.js 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 + }); + } +}); From b9562afeb21b73a92825afc3a24c5974f02999f2 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:32:13 +0530 Subject: [PATCH 15/33] Update index.html --- Components/Buttons/Confetti-Button/index.html | 126 ++---------------- 1 file changed, 9 insertions(+), 117 deletions(-) diff --git a/Components/Buttons/Confetti-Button/index.html b/Components/Buttons/Confetti-Button/index.html index d543f615..24abb9cd 100644 --- a/Components/Buttons/Confetti-Button/index.html +++ b/Components/Buttons/Confetti-Button/index.html @@ -1,125 +1,17 @@ - - - - Enhanced Confetti Button - + + + + + Confetti Button - - - - - + + From 4c41899cd88c275d1f48b6c6b752e6627002b71e Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:40:31 +0530 Subject: [PATCH 16/33] Delete Components/Buttons/Hamburger-menu-Button directory --- .../Buttons/Hamburger-menu-Button/index.html | 174 ------------------ 1 file changed, 174 deletions(-) delete mode 100644 Components/Buttons/Hamburger-menu-Button/index.html diff --git a/Components/Buttons/Hamburger-menu-Button/index.html b/Components/Buttons/Hamburger-menu-Button/index.html deleted file mode 100644 index c9ac1d11..00000000 --- a/Components/Buttons/Hamburger-menu-Button/index.html +++ /dev/null @@ -1,174 +0,0 @@ - - - - - - Colorful Hamburger Menu Animation - - - - - -
-
-
-
-
- - - - - - - - From c79866a86653f91f7fec7e0684b62b10db9426db Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:41:39 +0530 Subject: [PATCH 17/33] Create style.css --- Components/Buttons/Fizzy-Button/style.css | 52 +++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 Components/Buttons/Fizzy-Button/style.css 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; + } +} From 70eab255237ae34d522d77d4298d2805ef550a1b Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:42:27 +0530 Subject: [PATCH 18/33] Create script.js --- Components/Buttons/Fizzy-Button/script.js | 28 +++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 Components/Buttons/Fizzy-Button/script.js 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(), + }); + } +}); From 809e83d75ecfed0e95099f3fcd131002deb0b389 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:44:15 +0530 Subject: [PATCH 19/33] Update and rename index.html to index.html --- Components/Buttons/Fizzy-Button/index.html | 17 ++++ Components/Buttons/FizzyButton/index.html | 96 ---------------------- 2 files changed, 17 insertions(+), 96 deletions(-) create mode 100644 Components/Buttons/Fizzy-Button/index.html delete mode 100644 Components/Buttons/FizzyButton/index.html 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/FizzyButton/index.html b/Components/Buttons/FizzyButton/index.html deleted file mode 100644 index 885e6e7a..00000000 --- a/Components/Buttons/FizzyButton/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Extra Fizzy Button - - - - - - - - - From 19ae8ec8788abcd1390d2af6358a9c6f4a05ddc3 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:47:17 +0530 Subject: [PATCH 20/33] Update buttons.html --- assets/html_files/buttons.html | 61 +++++++++++++--------------------- 1 file changed, 24 insertions(+), 37 deletions(-) diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index c80acc22..ef80a691 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -131,19 +131,6 @@

3D Button-2

-
-

Fizzy Button

-
- - - -
-
- - - -
-

Bat Button

@@ -158,105 +145,105 @@

Bat Button

-

Confetti Button

+

Blob Button

- +
- +
-

Hamburger Menu Button

+

Bookmark Effect Button

- +
- +
-

Blob Button

+

Celebration Button

- +
- +
-

Bookmark Effect Button

+

Confetti Button

- +
- +
-

Celebration Button

+

Delete Animation Button

- +
- +
-

Delete Animation Button

+

Download Button

- +
- +
-

Download Button

+

Dynamic Hover Button

- +
- +
-

Dynamic Hover Button

+

Fizzy Button

- +
- +
From a009ef8bcb35d810c2dd7e5b8a3c401527089742 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:57:13 +0530 Subject: [PATCH 21/33] Update index.html --- .../Transfer-Lists/Card-Based-Transfer-List/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html index 24140da9..0bb4ec81 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html @@ -1,11 +1,13 @@ + - Card Transfer List + Card Transfer List +

Card-Based Transfer List

@@ -27,6 +29,8 @@

Card-Based Transfer List

Assigned Projects: 0
+ + From 3aa8eaae595e169d91c10fb40b1b212f86b8caee Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 11:57:56 +0530 Subject: [PATCH 22/33] Update script.js --- Components/Transfer-Lists/Card-Based-Transfer-List/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/script.js b/Components/Transfer-Lists/Card-Based-Transfer-List/script.js index 393fdb6e..f0bed2f1 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/script.js +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/script.js @@ -118,5 +118,5 @@ document.addEventListener("DOMContentLoaded", () => { resetBtn.addEventListener("click", resetLists); - resetLists(); + resetLists(); }); From f3d561dd4228b4f0419497e76d62960b5e316ac2 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:00:22 +0530 Subject: [PATCH 23/33] Update style.css --- Components/Transfer-Lists/Card-Based-Transfer-List/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/style.css b/Components/Transfer-Lists/Card-Based-Transfer-List/style.css index fc972c91..744b161f 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/style.css +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/style.css @@ -1,4 +1,3 @@ -/* Basic reset */ * { margin: 0; padding: 0; @@ -69,7 +68,7 @@ h1 { } .card { - background-color: #c465ff; /* Purple background */ + background-color: #c465ff; border: none; color: white; padding: 10px; @@ -101,7 +100,7 @@ h1 { button { padding: 10px 15px; cursor: pointer; - background-color: #6a1b9a; /* Purple background */ + background-color: #6a1b9a; color: white; border: none; border-radius: 8px; From 6ed954b223e506726ed397c0d57d334af0b85796 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:03:33 +0530 Subject: [PATCH 24/33] Update index.html --- Components/Transfer-Lists/Card-Based-Transfer-List/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html index 0bb4ec81..d04ef7a9 100644 --- a/Components/Transfer-Lists/Card-Based-Transfer-List/index.html +++ b/Components/Transfer-Lists/Card-Based-Transfer-List/index.html @@ -5,7 +5,7 @@ - Card Transfer List + Card Based Transfer List From 7e5771f49d6567526a7974dcab0b82f9479dd094 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:40:55 +0530 Subject: [PATCH 25/33] Update and rename Components/Tables/flip.html to Components/Tables/Expandable-Row-Table/index.html --- .../Tables/Expandable-Row-Table/index.html | 53 ++++++++ Components/Tables/flip.html | 113 ------------------ 2 files changed, 53 insertions(+), 113 deletions(-) create mode 100644 Components/Tables/Expandable-Row-Table/index.html delete mode 100644 Components/Tables/flip.html 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/flip.html b/Components/Tables/flip.html deleted file mode 100644 index a2c7189d..00000000 --- a/Components/Tables/flip.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - Interactive Flip Table - - - -

Interactive Flip Table

-
-
-
-
John Doe
30 years
-
New York
Likes coding
-
-
-
-
-
Jane Smith
25 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
-
-
-
- - From f35a654009fdcfde7475c5e0c865b960020c59b0 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:41:20 +0530 Subject: [PATCH 26/33] Create style.css --- .../Tables/Expandable-Row-Table/style.css | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 Components/Tables/Expandable-Row-Table/style.css 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%; + } +} From 784a58b214e624f403dc82f252c8c9df93f92e1c Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:41:31 +0530 Subject: [PATCH 27/33] Create script.js --- Components/Tables/Expandable-Row-Table/script.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 Components/Tables/Expandable-Row-Table/script.js 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); + } +} From bd51e5c691bca3155d7f3cc32aa5a804ffb16d02 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:42:27 +0530 Subject: [PATCH 28/33] Update and rename Components/Tables/rowtab.html to Components/Tables/Interactive-Flip-Table/index.html --- .../Tables/Interactive-Flip-Table/index.html | 53 ++++++++++++ Components/Tables/rowtab.html | 85 ------------------- 2 files changed, 53 insertions(+), 85 deletions(-) create mode 100644 Components/Tables/Interactive-Flip-Table/index.html delete mode 100644 Components/Tables/rowtab.html 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/rowtab.html b/Components/Tables/rowtab.html deleted file mode 100644 index a71e6f84..00000000 --- a/Components/Tables/rowtab.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - Expandable Row Table - - - -

Expandable Row Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCity
John Doe30New York
More about John: Loves coding, enjoys long walks.
Jane Smith25Los Angeles
More about Jane: Enjoys hiking and outdoor activities.
Sam Brown35Chicago
More about Sam: Loves photography and traveling.
- - - - From 0f7d89e1860718826e9b717c2f361389697a2e71 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:42:47 +0530 Subject: [PATCH 29/33] Create style.css --- .../Tables/Interactive-Flip-Table/style.css | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 Components/Tables/Interactive-Flip-Table/style.css 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; + } +} From 13d0b819473d16df6eef354f59fc4590f56452a4 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 12:53:00 +0530 Subject: [PATCH 30/33] Update tables.html --- assets/html_files/tables.html | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/assets/html_files/tables.html b/assets/html_files/tables.html index 00477c9d..8ad3456e 100644 --- a/assets/html_files/tables.html +++ b/assets/html_files/tables.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,7 @@ - Beautiify | Accordions + Beautiify | Tables @@ -63,19 +63,22 @@ @@ -103,32 +106,31 @@

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

Interactive Flip Table

+

Expandable Row Table

- +
- +
-

Expandable Row Table

+

Interactive Flip Table

- +
- +
-
From 7b6665c7ba74e823261bf4c76484d1bcd435a50b Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 13:05:22 +0530 Subject: [PATCH 31/33] Update index.html --- index.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 51552f32..6f1c2de9 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@ -
@@ -128,7 +127,6 @@

Accordions

-
@@ -392,4 +390,4 @@

Keep In Touch

- \ No newline at end of file + From 5d76a45484a93491d9027cd3bd96993fbd112e17 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 14:58:06 +0530 Subject: [PATCH 32/33] Update style.css --- style.css | 77 +++++++++++++++++++------------------------------------ 1 file changed, 27 insertions(+), 50 deletions(-) diff --git a/style.css b/style.css index cbc6d349..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: #f9b3c7; - color: #df87ef; } 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,33 +1081,14 @@ footer { } .nav-item { - margin: 1.7rem 0; + margin: 1.5rem 0; font-size: 21px; } - nav li { - margin: 0 15px; - } - - nav li a { - text-decoration: none; - color: white; - font-size: 16px; - font-weight: 500; - padding: 8px 15px; - transition: color 0.3s, background-color 0.3s; - border-radius: 4px; - } - nav li:hover { border-bottom: 0.4rem white solid; transition: 0.3s ease-in-out; } - - nav li:hover a { - color: white; - } - button#dark-mode-toggle { background-image: url('./assets/images/dark.png'); @@ -1181,31 +1186,3 @@ footer { margin: 15px !important; } } -.nav-menu .nav-item .nav-link { - color: #FF5733; /* Bright color for default state */ - text-decoration: none; /* Remove underline */ - padding: 10px 15px; /* Add some padding */ - position: relative; /* For positioning the underline */ - transition: color 0.3s ease; /* Smooth transition for color */ -} - -.nav-menu .nav-item .nav-link::after { - content: ''; /* Create a pseudo-element */ - display: block; - width: 0; /* Start with width 0 */ - height: 2px; /* Height of the underline */ - background: #FF5733; /* Bright color for underline */ - transition: width 0.3s ease; /* Smooth transition for width */ - position: absolute; - left: 50%; /* Center the underline */ - bottom: -5px; /* Position below the text */ - transform: translateX(-50%); /* Center adjustment */ -} - -.nav-menu .nav-item .nav-link:hover { - color: #C70039; /* Change text color on hover */ -} - -.nav-menu .nav-item .nav-link:hover::after { - width: 100%; /* Expand underline to full width on hover */ -} From 596644c7d27faba78df53bcb8e370555b0bf1918 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 1 Dec 2024 15:21:33 +0530 Subject: [PATCH 33/33] Update cursor.css --- assets/css_files/cursor.css | 45 ++++--------------------------------- 1 file changed, 4 insertions(+), 41 deletions(-) diff --git a/assets/css_files/cursor.css b/assets/css_files/cursor.css index 02562c4d..8b68028b 100644 --- a/assets/css_files/cursor.css +++ b/assets/css_files/cursor.css @@ -4,52 +4,15 @@ height: 25px; border-radius: 50%; pointer-events: none; - animation: colors 4s ease-in-out infinite, pulse 2s infinite; + animation: colors 5s infinite; position: fixed; - transform: translate(-50%, -50%); - background: radial-gradient(circle, #FF6B6B, #3A0088); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); - transition: transform 0.15s ease-out, background-color 0.3s; } .circle::before { content: ""; position: fixed; - width: 70px; - height: 70px; - opacity: 0.15; - transform: translate(-30%, -30%); + width: 50px; + height: 50px; + opacity: 0.2; border-radius: 50%; - background: radial-gradient(circle, #FF6B6B, #3A0088); - filter: blur(10px); - transition: width 0.15s ease-out, height 0.15s ease-out, background-color 0.3s; -} - -/* Animation for changing colors */ -@keyframes colors { - 0% { - background-color: #FF6B6B; - box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); - } - 50% { - background-color: #3A0088; - box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(58, 0, 136, 0.8); - } - 100% { - background-color: #FF6B6B; - box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(58, 0, 136, 0.5); - } -} - -/* Pulse animation for smoother interactions */ -@keyframes pulse { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } - 100% { - transform: scale(1); - } }