From e4f65ebd4e08f2b9f1ec9e0464f81fb20172fe10 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 13:41:12 +0500 Subject: [PATCH 1/7] Hover Grayscale Effect - CSS --- public/data/css.json | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/public/data/css.json b/public/data/css.json index cf65a6a1..5edf0cd3 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -243,6 +243,35 @@ ], "tags": ["css", "hover", "glow", "effects"], "author": "dostonnabotov" + }, + { + "title": "Hover Grayscale Effect", + "description": "Applies a grayscale effect to the image on hover.", + "code": [ + ".card {", + " height: 300px;", + " width: 200px;", + " border-radius: 5px;", + " overflow: hidden;", + "}", + "", + ".card img{", + " height: 100%;", + " width: 100%;", + " object-fit: cover;", + " filter: grayscale(100%);", + " transition: all 0.3s;", + " transition-duration: 200ms;", + " cursor: pointer;", + "}", + "", + ".card:hover img {", + " filter: grayscale(0%);", + " scale: 1.05;", + "} " + ], + "tags": ["css", "hover", "image", "effects"], + "author": "Haider-Mukhtar" } ] } From ffd7bfa88ba21e800242b72dc93d4cf72978e5f2 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 15:05:46 +0500 Subject: [PATCH 2/7] Hover Grayscale Effect - CSS --- public/data/css.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/data/css.json b/public/data/css.json index 5edf0cd3..a9241f4f 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -245,8 +245,8 @@ "author": "dostonnabotov" }, { - "title": "Hover Grayscale Effect", - "description": "Applies a grayscale effect to the image on hover.", + "title": "Hover to Reveal Color", + "description": "A card with an image that transitions from grayscale to full color on hover.", "code": [ ".card {", " height: 300px;", From b3ab36b41e05d336572dfdc39680b7fae0ffff77 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 16:05:47 +0500 Subject: [PATCH 3/7] Text Transformation - CSS --- public/data/css.json | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/public/data/css.json b/public/data/css.json index a9241f4f..601a9ca2 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -15,6 +15,25 @@ "code": ["p {", " letter-spacing: 0.05em;", "}"], "tags": ["css", "typography", "spacing"], "author": "dostonnabotov" + }, + { + "title": "Text Transformation", + "description": "It can be used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word", + "code": [ + "p.uppercase {", + " text-transform: uppercase;", + "}", + "", + "p.lowercase {", + " text-transform: lowercase;", + "}", + "", + "p.capitalize {", + " text-transform: capitalize;", + "}" + ], + "tags": ["css", "typography", "text"], + "author": "Haider-Mukhtar" } ] }, From df4a2bf6fcfd5e6cb861192d228c2a5650367c3d Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Fri, 3 Jan 2025 10:23:47 +0000 Subject: [PATCH 4/7] Update consolidated snippets --- public/consolidated/css.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/public/consolidated/css.json b/public/consolidated/css.json index b759c611..339e3fc2 100644 --- a/public/consolidated/css.json +++ b/public/consolidated/css.json @@ -38,6 +38,19 @@ ], "contributors": [], "code": ".button {\n font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;\n background: #0a85ff;\n color: #fff;\n padding: 8px 12px;\n border: none;\n margin: 4px;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.button:hover {\n background: #0974ee;\n color: #fff\n}\n" + }, + { + "title": "Switch Button", + "description": "A switch button with a beautiful style and effect.", + "author": "Haider-Mukhtar", + "tags": [ + "button", + "switch", + "toggle", + "slider" + ], + "contributors": [], + "code": "/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: #d4acfb;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 0px 20px rgba(0,0,0,0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: #b84fce;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #b84fce;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n width: 2em;\n height: 2em;\n bottom: 0;\n}\n\n/* HTML */\n\n" } ] }, From f4440cd774ad410dff53ec0abb0c5860f0c5150a Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 6 Jan 2025 08:42:28 +0000 Subject: [PATCH 5/7] Update consolidated snippets --- public/consolidated/cpp.json | 18 +++++++++- public/consolidated/css.json | 63 +++++++++++++++++++++++++++++++++++ public/consolidated/java.json | 18 ++++++++++ 3 files changed, 98 insertions(+), 1 deletion(-) diff --git a/public/consolidated/cpp.json b/public/consolidated/cpp.json index fd38de1b..c121a725 100644 --- a/public/consolidated/cpp.json +++ b/public/consolidated/cpp.json @@ -33,7 +33,6 @@ ] }, { - "categoryName": "Debuging", "name": "Debugging", "snippets": [ { @@ -50,6 +49,23 @@ } ] }, + { + "name": "Debuging", + "snippets": [ + { + "title": "Vector Print", + "description": "Overloads the << operator to print the contents of a vector just like in python.", + "author": "Mohamed-faaris", + "tags": [ + "printing", + "debuging", + "vector" + ], + "contributors": [], + "code": "#include \n#include \n\ntemplate \nstd::ostream& operator<<(std::ostream& os, const std::vector& vec) {\n os << \"[\"; \n for (size_t i = 0; i < vec.size(); ++i) {\n os << vec[i]; // Print each vector element\n if (i != vec.size() - 1) {\n os << \", \"; // Add separator\n }\n }\n os << \"]\"; \n return os; // Return the stream\n}\n\n// Usage:\nstd::vector numbers = {1, 2, 3, 4, 5};\nstd::cout << numbers << std::endl; // Outputs: [1, 2, 3, 4, 5]\n\n" + } + ] + }, { "name": "Math And Numbers", "snippets": [ diff --git a/public/consolidated/css.json b/public/consolidated/css.json index e4388bc2..5c4f454e 100644 --- a/public/consolidated/css.json +++ b/public/consolidated/css.json @@ -1,4 +1,67 @@ [ + { + "name": "Animations", + "snippets": [ + { + "title": "Blink Animation", + "description": "Adds an infinite blinking animation to an element", + "author": "AlsoKnownAs-Ax", + "tags": [ + "animation", + "blink", + "infinite" + ], + "contributors": [], + "code": ".blink {\n animation: blink 1s linear infinite;\n}\n\n@keyframes blink{\n 0%{\n opacity: 0;\n }\n 50%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n}\n" + }, + { + "title": "Pulse Animation", + "description": "Adds a smooth pulsing animation with opacity and scale effects", + "author": "AlsoKnownAs-Ax", + "tags": [ + "animation", + "pulse", + "pulse-scale" + ], + "contributors": [], + "code": ".pulse {\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0% {\n opacity: 0.5;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n transform: scale(1.05);\n }\n 100% {\n opacity: 0.5;\n transform: scale(1);\n }\n}\n" + }, + { + "title": "Shake Animation", + "description": "Adds a shake animation ( commonly used to mark invalid fields )", + "author": "AlsoKnownAs-Ax", + "tags": [ + "shake", + "shake-horizontal" + ], + "contributors": [], + "code": ".shake {\n animation: shake .5s ease-in-out;\n}\n\n@keyframes shake {\n 0%, 100% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-10px);\n }\n 50% {\n transform: translateX(10px);\n }\n 75% {\n transform: translateX(-10px);\n }\n}\n" + }, + { + "title": "Slide-in Animation", + "description": "Adds a slide-in from the right side of the screen", + "author": "AlsoKnownAs-Ax", + "tags": [ + "animation", + "slide-in", + "slide-right" + ], + "contributors": [], + "code": ".slide-in {\n animation: slide-in 1s ease-in-out;\n}\n\n@keyframes slide-in {\n from {\n scale: 300% 1;\n translate: 150vw 0;\n }\n\n to {\n scale: 100% 1;\n translate: 0 0;\n }\n}\n" + }, + { + "title": "Typewriter Animation", + "description": "Adds a typewriter animation + blinking cursor", + "author": "AlsoKnownAs-Ax", + "tags": [ + "blinking", + "typewriter" + ], + "contributors": [], + "code": "
\n
\n

Typerwriter Animation

\n
\n
\n```\n\n```css\n .typewriter{\n display: flex;\n justify-content: center;\n }\n\n .typewriter p {\n overflow: hidden;\n font-size: 1.5rem;\n font-family: monospace;\n border-right: 1px solid;\n margin-inline: auto;\n white-space: nowrap;\n /* The cursor will inherit the text's color by default */\n /* border-color: red */ \n /* Steps: number of chars (better to set directly in js)*/\n animation: typing 3s steps(21) forwards,\n blink 1s step-end infinite;\n }\n\n @keyframes typing{\n from{\n width: 0%\n }\n to{\n width: 100%\n }\n }\n\n @keyframes blink{\n 50%{\n border-color: transparent;\n }\n }\n" + } + ] + }, { "name": "Buttons", "snippets": [ diff --git a/public/consolidated/java.json b/public/consolidated/java.json index 3a36e17d..f972f5e0 100644 --- a/public/consolidated/java.json +++ b/public/consolidated/java.json @@ -1,4 +1,22 @@ [ + { + "name": "Array Manipulation", + "snippets": [ + { + "title": "Zip Two Lists", + "description": "Zips two lists into a list of paired elements, combining corresponding elements from both lists.", + "author": "davidanukam", + "tags": [ + "lists", + "zip", + "stream-api", + "collections" + ], + "contributors": [], + "code": "import java.util.*; // Importing utility classes for List and Arrays\nimport java.util.stream.IntStream; // Importing IntStream for range and mapping\nimport java.util.stream.Collectors; // Importing Collectors for collecting stream results\n\npublic List> zip(List list1, List list2) {\n // Create pairs by iterating through the indices of both lists\n return IntStream.range(0, Math.min(list1.size(), list2.size())) // Limit the range to the smaller list\n .mapToObj(i -> Arrays.asList(list1.get(i), list2.get(i))) // Pair elements from both lists at index i\n .collect(Collectors.toList()); // Collect the pairs into a List\n}\n\n// Usage:\nList arr1 = Arrays.asList(\"a\", \"b\", \"c\");\nList arr2 = Arrays.asList(1, 2, 3);\nList> zipped = zip(arr1, arr2);\n\nSystem.out.println(zipped); // Output: [[a, 1], [b, 2], [c, 3]]\n" + } + ] + }, { "name": "Basics", "snippets": [ From 5305b4b36fa251bd029fdbd884441989f6bd9f0f Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Mon, 6 Jan 2025 15:15:17 +0500 Subject: [PATCH 6/7] sticky navbar - css --- snippets/css/layouts/sticky-navbar.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 snippets/css/layouts/sticky-navbar.md diff --git a/snippets/css/layouts/sticky-navbar.md b/snippets/css/layouts/sticky-navbar.md new file mode 100644 index 00000000..572932c2 --- /dev/null +++ b/snippets/css/layouts/sticky-navbar.md @@ -0,0 +1,15 @@ +--- +title: Sticky Navbar +description: Ensure the navbar always shows and remains at the top of the page on scroll. +author: Haider Mukhtar +tags: layout,navbar,sticky +--- + +```css +.navbar{ + position: fixed; + top: 0; + left: 0; + width: 100%; +} +``` From 7170e0c4bb5b818f759977c470f90d4ec8e8a358 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 6 Jan 2025 10:15:40 +0000 Subject: [PATCH 7/7] Update consolidated snippets --- public/consolidated/css.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/public/consolidated/css.json b/public/consolidated/css.json index 5c4f454e..1f61030b 100644 --- a/public/consolidated/css.json +++ b/public/consolidated/css.json @@ -218,6 +218,18 @@ ], "contributors": [], "code": "body {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nfooter {\n margin-top: auto;\n}\n" + }, + { + "title": "Sticky Navbar", + "description": "Ensure the navbar always shows and remains at the top of the page on scroll.", + "author": "Haider Mukhtar", + "tags": [ + "layout", + "navbar", + "sticky" + ], + "contributors": [], + "code": ".navbar{\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n}\n" } ] },