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 359088c9..1f61030b 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": [ @@ -38,6 +101,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" } ] }, @@ -142,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" } ] }, 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": [ diff --git a/public/data/css.json b/public/data/css.json new file mode 100644 index 00000000..601a9ca2 --- /dev/null +++ b/public/data/css.json @@ -0,0 +1,297 @@ +[ + { + "categoryName": "Typography", + "snippets": [ + { + "title": "Responsive Font Sizing", + "description": "Adjusts font size based on viewport width.", + "code": ["h1 {", " font-size: calc(1.5rem + 2vw);", "}"], + "tags": ["css", "font", "responsive", "typography"], + "author": "dostonnabotov" + }, + { + "title": "Letter Spacing", + "description": "Adds space between letters for better readability.", + "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" + } + ] + }, + { + "categoryName": "Layouts", + "snippets": [ + { + "title": "Grid layout", + "description": "Equal sized items in a responsive grid", + "code": [ + ".grid-container {", + " display: grid", + " grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));", + "/* Explanation:", + "- `auto-fit`: Automatically fits as many columns as possible within the container.", + "- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).", + "*/", + "}", + "" + ], + "tags": ["css", "layout", "grid"], + "author": "xshubhamg" + }, + { + "title": "Sticky Footer", + "description": "Ensures the footer always stays at the bottom of the page.", + "code": [ + "body {", + " display: flex;", + " flex-direction: column;", + " min-height: 100vh;", + "}", + "", + "footer {", + " margin-top: auto;", + "}" + ], + "tags": ["css", "layout", "footer", "sticky"], + "author": "dostonnabotov" + }, + { + "title": "Equal-Width Columns", + "description": "Creates columns with equal widths using flexbox.", + "code": [ + ".columns {", + " display: flex;", + " justify-content: space-between;", + "}", + "", + ".column {", + " flex: 1;", + " margin: 0 10px;", + "}" + ], + "tags": ["css", "flexbox", "columns", "layout"], + "author": "dostonnabotov" + }, + { + "title": "CSS Reset", + "description": "Resets some default browser styles, ensuring consistency across browsers.", + "code": [ + "* {", + " margin: 0;", + " padding: 0;", + " box-sizing: border-box", + "}" + ], + "tags": ["css", "reset", "browser", "layout"], + "author": "AmeerMoustafa" + }, + { + "title": "Responsive Design", + "description": "The different responsive breakpoints.", + "code": [ + "/* Phone */", + ".element {", + " margin: 0 10%", + "}", + "", + "/* Tablet */", + "@media (min-width: 640px) {", + " .element {", + " margin: 0 20%", + " }", + "}", + "", + "/* Desktop base */", + "@media (min-width: 768px) {", + " .element {", + " margin: 0 30%", + " }", + "}", + "", + "/* Desktop large */", + "@media (min-width: 1024px) {", + " .element {", + " margin: 0 40%", + " }", + "}", + "", + "/* Desktop extra large */", + "@media (min-width: 1280px) {", + " .element {", + " margin: 0 60%", + " }", + "}", + "", + "/* Desktop bige */", + "@media (min-width: 1536px) {", + " .element {", + " margin: 0 80%", + " }", + "}" + ], + "tags": ["css", "responsive"], + "author": "kruimol" + } + ] + }, + { + "categoryName": "Buttons", + "snippets": [ + { + "title": "Button Hover Effect", + "description": "Creates a hover effect with a color transition.", + "code": [ + ".button {", + " background-color: #007bff;", + " color: white;", + " padding: 10px 20px;", + " border: none;", + " border-radius: 5px;", + " cursor: pointer;", + " transition: background-color 0.3s ease;", + "}", + "", + ".button:hover {", + " background-color: #0056b3;", + "}" + ], + "tags": ["css", "button", "hover", "transition"], + "author": "dostonnabotov" + }, + { + "title": "3D Button Effect", + "description": "Adds a 3D effect to a button when clicked.", + "code": [ + ".button {", + " background-color: #28a745;", + " color: white;", + " padding: 10px 20px;", + " border: none;", + " border-radius: 5px;", + " box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);", + " transition: transform 0.1s;", + "}", + "", + ".button:active {", + " transform: translateY(2px);", + " box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);", + "}" + ], + "tags": ["css", "button", "3D", "effect"], + "author": "dostonnabotov" + }, + { + "title": "MacOS Button", + "description": "A macOS-like button style, with hover and shading effects.", + "code": [ + ".button {", + " font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;", + " background: #0a85ff;", + " color: #fff;", + " padding: 8px 12px;", + " border: none;", + " margin: 4px;", + " border-radius: 10px;", + " cursor: pointer;", + " box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/", + " font-size: 14px;", + " display: flex;", + " align-items: center;", + " justify-content: center;", + " text-decoration: none;", + " transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);", + "}", + ".button:hover {", + " background: #0974ee;", + " color: #fff", + "}" + ], + "tags": ["css", "button", "macos", "hover", "transition"], + "author": "e3nviction" + } + ] + }, + { + "categoryName": "Effects", + "snippets": [ + { + "title": "Blur Background", + "description": "Applies a blur effect to the background of an element.", + "code": [ + ".blur-background {", + " backdrop-filter: blur(10px);", + " background: rgba(255, 255, 255, 0.5);", + "}" + ], + "tags": ["css", "blur", "background", "effects"], + "author": "dostonnabotov" + }, + { + "title": "Hover Glow Effect", + "description": "Adds a glowing effect on hover.", + "code": [ + ".glow {", + " background-color: #f39c12;", + " padding: 10px 20px;", + " border-radius: 5px;", + " transition: box-shadow 0.3s ease;", + "}", + "", + ".glow:hover {", + " box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);", + "}" + ], + "tags": ["css", "hover", "glow", "effects"], + "author": "dostonnabotov" + }, + { + "title": "Hover to Reveal Color", + "description": "A card with an image that transitions from grayscale to full color 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" + } + ] + } +] diff --git a/snippets/css/buttons/switch-button.md b/snippets/css/buttons/switch-button.md new file mode 100644 index 00000000..d90263c9 --- /dev/null +++ b/snippets/css/buttons/switch-button.md @@ -0,0 +1,68 @@ +--- +title: Switch Button +description: A switch button with a beautiful style and effect. +author: Haider-Mukhtar +tags: button,switch,toggle,slider +--- + +```css +/* The switch - the box around the slider */ +.switch { + font-size: 17px; + position: relative; + display: inline-block; + width: 3.5em; + height: 2em; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + inset: 0; + background: #d4acfb; + border-radius: 50px; + transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); +} + +.slider:before { + position: absolute; + content: ""; + height: 1.4em; + width: 1.4em; + left: 0.3em; + bottom: 0.3em; + background-color: white; + border-radius: 50px; + box-shadow: 0 0px 20px rgba(0,0,0,0.4); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.switch input:checked + .slider { + background: #b84fce; +} + +.switch input:focus + .slider { + box-shadow: 0 0 1px #b84fce; +} + +.switch input:checked + .slider:before { + transform: translateX(1.6em); + width: 2em; + height: 2em; + bottom: 0; +} + +/* HTML */ + +``` \ No newline at end of file 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%; +} +```