├── client ├── css │ ├── scss │ │ └── style.scss │ ├── pages │ │ ├── style.css │ │ ├── issue.css │ │ ├── error.css │ │ └── library.css │ └── components │ │ ├── footer.css │ │ ├── loader.css │ │ ├── settings.css │ │ └── header.css ├── img │ ├── logo.png │ ├── bg_glass.jpg │ ├── bg_glass.png │ ├── favicon.ico │ ├── text_portrait.svg │ ├── text_landscape.svg │ └── lang │ │ ├── icon6.svg │ │ ├── icon5.svg │ │ ├── icon4.svg │ │ ├── icon8.svg │ │ └── icon3.svg ├── fonts │ ├── Astromax.ttf │ ├── Spectron.otf │ ├── Spoiled.otf │ ├── Astromax.woff │ ├── PerryWaters.otf │ ├── Spectron.woff2 │ ├── PerryWaters.woff │ └── Liber │ │ ├── Liber-700-Bold.ttf │ │ ├── Liber-900-Black.ttf │ │ ├── Liber-400-Regular.ttf │ │ ├── Liber-500-Medium.ttf │ │ ├── Liber-300-SemiLight.ttf │ │ ├── Liber-600-SemiBold.ttf │ │ ├── Liber-800-ExtraBold.ttf │ │ └── Liber-Font.css ├── assets │ ├── Resources.ai │ └── GitHub-Banner.png ├── js │ ├── components │ │ ├── secure.js │ │ └── responsive.js │ ├── main.js │ ├── dots.js │ └── libraries │ │ ├── clipboard.min.js │ │ └── jquery.waypoints.min.js ├── data │ ├── fonts.data.js │ ├── ml.data.js │ ├── android.data.js │ ├── api.data.js │ ├── icon.data.js │ └── css.data.js ├── 404.html ├── issue.html └── src │ ├── mlpack.html │ ├── apipack.html │ ├── csspack.html │ ├── jspack.html │ ├── iconpack.html │ ├── fontspack.html │ ├── imgpack.html │ └── androidpack.html ├── .prettierrc ├── .imgbotconfig ├── .htaccess ├── .github ├── ISSUE_TEMPLATE │ ├── bug-issue.md │ ├── documentation-report.md │ └── feature-request.md └── PULL_REQUEST_TEMPLATE │ └── pull_request_template.md ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── CODE_OF_CONDUCT.md └── README.md /client/css/scss/style.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/css/pages/style.css: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /client/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/img/logo.png -------------------------------------------------------------------------------- /client/img/bg_glass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/img/bg_glass.jpg -------------------------------------------------------------------------------- /client/img/bg_glass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/img/bg_glass.png -------------------------------------------------------------------------------- /client/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/img/favicon.ico -------------------------------------------------------------------------------- /client/fonts/Astromax.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Astromax.ttf -------------------------------------------------------------------------------- /client/fonts/Spectron.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Spectron.otf -------------------------------------------------------------------------------- /client/fonts/Spoiled.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Spoiled.otf -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "printWidth": 100, 4 | "tabWidth": 4, 5 | "useTabs": true 6 | } 7 | -------------------------------------------------------------------------------- /client/assets/Resources.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/assets/Resources.ai -------------------------------------------------------------------------------- /client/fonts/Astromax.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Astromax.woff -------------------------------------------------------------------------------- /client/fonts/PerryWaters.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/PerryWaters.otf -------------------------------------------------------------------------------- /client/fonts/Spectron.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Spectron.woff2 -------------------------------------------------------------------------------- /client/fonts/PerryWaters.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/PerryWaters.woff -------------------------------------------------------------------------------- /client/assets/GitHub-Banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/assets/GitHub-Banner.png -------------------------------------------------------------------------------- /client/css/pages/issue.css: -------------------------------------------------------------------------------- 1 | /* **************************** Add New Lib Form Styles **************************** */ 2 | -------------------------------------------------------------------------------- /.imgbotconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignoredFiles": [ 3 | "text_landscape.svg", 4 | "text_portrait.svg" 5 | ] 6 | } -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-700-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-700-Bold.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-900-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-900-Black.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-400-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-400-Regular.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-500-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-500-Medium.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-300-SemiLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-300-SemiLight.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-600-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-600-SemiBold.ttf -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-800-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imniladri/DevHub/HEAD/client/fonts/Liber/Liber-800-ExtraBold.ttf -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine on 2 | RewriteCond %{REQUEST_FILENAME} !-d 3 | RewriteCond %{REQUEST_FILENAME}\.html -f 4 | RewriteRule ^(.*)$ $1.html [NC,L] -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Bug Issue \U0001F41B" 3 | about: Create a issue to help us improve 4 | title: "Bug: " 5 | labels: bug 6 | assignees: "" 7 | --- 8 | 9 | ### Describe the bug 10 | 11 | A clear and concise description of what the bug is. 12 | 13 | ### Expected behavior 14 | 15 | A clear and concise description of what you expected to happen. 16 | 17 | ### Screenshots 18 | 19 | If applicable, add screenshots to help explain your problem. 20 | 21 | ### Additional context 22 | 23 | Add any other context about the problem here. 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Documentation Report \U0001F4DA" 3 | about: Describe the documentation you want add. 4 | title: "Doc: " 5 | labels: documentation 6 | assignees: "" 7 | --- 8 | 9 | ### Describe the solution you'd like 10 | 11 | A clear and concise description of what you want to happen. 12 | 13 | ### Describe alternatives you've considered 14 | 15 | A clear and concise description of any alternative solutions or features you've considered. 16 | 17 | ### Additional context 18 | 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.eol": "\n", 3 | "editor.tabSize": 4, 4 | "editor.defaultFormatter": "esbenp.prettier-vscode", 5 | "editor.bracketPairColorization.enabled": false, 6 | "editor.autoClosingBrackets": "always", 7 | "editor.detectIndentation": true, 8 | "editor.autoIndent": "full", 9 | "files.autoSave": "afterDelay", 10 | "search.exclude": { 11 | "node_modules/": true 12 | }, 13 | "files.exclude": { 14 | "node_modules/": true, 15 | "build/": true, 16 | "dist/": true 17 | }, 18 | "prettier.tabWidth": 4, 19 | "prettier.semi": true, 20 | "prettier.singleQuote": false, 21 | "prettier.jsxSingleQuote": false, 22 | "[css]": { 23 | "editor.defaultFormatter": "esbenp.prettier-vscode" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Feature Request \U0001F680" 3 | about: Suggest an idea for this project 4 | title: "Feature: " 5 | labels: enhancement 6 | assignees: "" 7 | --- 8 | 9 | ### Is your feature request related to a problem? Please describe. 10 | 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | ### Describe the solution you'd like 14 | 15 | A clear and concise description of what you want to happen. 16 | 17 | ### Describe alternatives you've considered 18 | 19 | A clear and concise description of any alternative solutions or features you've considered. 20 | 21 | ### Additional context 22 | 23 | Add any other context or screenshots about the feature request here. 24 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## What changes have you made? 2 | 3 | (Write your answer here.) 4 | 5 | ## Checklist 6 | 7 | Before you create this PR, confirm all the requirements listed below by checking the checkboxes [x]: 8 | 9 | - [ ] I am making a proper pull request, not spam. 10 | - [ ] I've checked the issue list before deciding what to submit. 11 | - [ ] I have checked there aren't other open Pull Requests for the same update/change 12 | - [ ] I have tested the code before submission 13 | 14 | ## Related Issues or Pull Requests 15 | 16 | Eg: I Solved Issue #_{Issue Number}_. 17 | 18 | OR 19 | 20 | Eg: I Solved Issue #_{PR Number}_. 21 | 22 | (Write your answer here.) 23 | 24 | ## Add relevant screenshot or video (if any) 25 | 26 | (Add here) 27 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to [Dev Hub](https://github.com/imniladri/DevHub) 2 | 3 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square&logo=git&logoColor=fff)](https://github.com/imniladri/DevHub/pulls) 4 | [![GitHub Issues](https://img.shields.io/github/issues/imniladri/DevHub?style=flat-square&logo=github&color=f00)](https://github.com/imniladri/DevHub/issues) 5 | [![GitHub PRs](https://img.shields.io/github/issues-pr/imniladri/DevHub?style=flat-square&color=0A66C2&logo=github)](https://github.com/imniladri/DevHub/pulls) 6 | [![GitHub License](https://img.shields.io/github/license/imniladri/DevHub?style=flat-square&logo=github&color=3DB2FF)](https://github.com/imniladri/DevHub/blob/master/LICENSE) 7 | 8 | We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: 9 | 10 | - Reporting a bug 11 | - Submitting a fix 12 | - Proposing new features 13 | 14 | ## Add Your Contributing Details Here: 15 | 16 | ### Mentor: [Niladri Mondal ](https://github.com/imniladri) 17 | 18 | ### Mentee: 19 | 20 | 1. [Your Name](https://github.com/username) 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Niladri Mondal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /client/js/components/secure.js: -------------------------------------------------------------------------------- 1 | // MY CODE/WEBSITE IS SECURED/PROTECTED (secure.js) 2 | 3 | $(document).ready(function () { 4 | // Disable CTRL/SHIFT KEY 5 | $(document).keydown(function (e) { 6 | if ( 7 | e.ctrlKey && 8 | (e.keyCode === 73 || 9 | e.keyCode === 83 || 10 | e.keyCode === 85 || 11 | e.keyCode === 123) 12 | ) { 13 | swal( 14 | "Oops!", 15 | "Sorry:(, My Library is secured; Be Creative, not copycat!", 16 | "error" 17 | ); 18 | return false; 19 | } else if ( 20 | e.keyCode === 123 || 21 | (e.ctrlKey && e.shiftKey && e.keyCode === 73) 22 | ) { 23 | swal( 24 | "Oops!", 25 | "Sorry:(, My Library is secured; Be Creative, not copycat!", 26 | "error" 27 | ); 28 | return false; 29 | } else { 30 | return true; 31 | } 32 | }); 33 | 34 | // Disable Right Click 35 | $(document).bind("contextmenu", function (e) { 36 | e.preventDefault(); 37 | swal( 38 | "Oops!", 39 | "Sorry:(, My Library is secured; Be Creative, not copycat!", 40 | "error" 41 | ); 42 | return false; 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /client/css/components/footer.css: -------------------------------------------------------------------------------- 1 | /* **************************** Footer Section Styles **************************** */ 2 | 3 | footer { 4 | margin: 10rem auto 0; 5 | padding: 4rem 10rem 2rem; 6 | position: relative; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | 11 | /* Glass Effect */ 12 | background: rgba(255, 255, 255, 0.1); 13 | box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2), inset 0px 0px 20px 10px rgba(255, 255, 255, 0.2); 14 | border-top: 4px solid rgba(255, 255, 255, 0.7); 15 | backdrop-filter: blur(10px); 16 | -webkit-backdrop-filter: blur(10px); 17 | } 18 | 19 | footer h2 { 20 | font-size: 2rem; 21 | font-family: var(--textfont); 22 | color: var(--lightwhite); 23 | letter-spacing: 0.8px; 24 | line-height: 1.6; 25 | } 26 | 27 | footer h2 a { 28 | font-family: "Astromax", sans-serif; 29 | color: var(--primarywhite); 30 | text-decoration: none !important; 31 | transition: all 0.2s ease-in-out; 32 | } 33 | 34 | footer h2 a:hover { 35 | color: var(--primarycolor); 36 | } 37 | 38 | footer p { 39 | font-size: 1.8rem; 40 | font-weight: 500; 41 | font-family: "Liber", sans-serif; 42 | color: var(--lightwhite); 43 | letter-spacing: 0.4px; 44 | line-height: 1.6; 45 | } 46 | 47 | @media (max-width: 992px) { 48 | footer { 49 | padding: 4rem 4rem 2rem; 50 | align-items: flex-start; 51 | flex-direction: column; 52 | } 53 | } 54 | 55 | /* **************************** Styles End **************************** */ 56 | -------------------------------------------------------------------------------- /client/fonts/Liber/Liber-Font.css: -------------------------------------------------------------------------------- 1 | /* Liber Font Faces (300, 400, 500, 600, 700, 800, 900) */ 2 | 3 | @font-face { 4 | font-family: "Liber"; 5 | src: url(../../fonts/Liber/Liber-300-SemiLight.ttf) format("truetype"); 6 | font-weight: 300; 7 | font-style: normal; 8 | text-rendering: optimizeLegibility; 9 | } 10 | 11 | @font-face { 12 | font-family: "Liber"; 13 | src: url(../../fonts/Liber/Liber-400-Regular.ttf) format("truetype"); 14 | font-weight: 400; 15 | font-style: normal; 16 | text-rendering: optimizeLegibility; 17 | } 18 | 19 | @font-face { 20 | font-family: "Liber"; 21 | src: url(../../fonts/Liber/Liber-500-Medium.ttf) format("truetype"); 22 | font-weight: 500; 23 | font-style: normal; 24 | text-rendering: optimizeLegibility; 25 | } 26 | 27 | @font-face { 28 | font-family: "Liber"; 29 | src: url(../../fonts/Liber/Liber-600-SemiBold.ttf) format("truetype"); 30 | font-weight: 600; 31 | font-style: normal; 32 | text-rendering: optimizeLegibility; 33 | } 34 | 35 | @font-face { 36 | font-family: "Liber"; 37 | src: url(../../fonts/Liber/Liber-700-Bold.ttf) format("truetype"); 38 | font-weight: 700; 39 | font-style: normal; 40 | text-rendering: optimizeLegibility; 41 | } 42 | 43 | @font-face { 44 | font-family: "Liber"; 45 | src: url(../../fonts/Liber/Liber-800-ExtraBold.ttf) format("truetype"); 46 | font-weight: 800; 47 | font-style: normal; 48 | text-rendering: optimizeLegibility; 49 | } 50 | 51 | @font-face { 52 | font-family: "Liber"; 53 | src: url(../../fonts/Liber/Liber-900-Black.ttf) format("truetype"); 54 | font-weight: 900; 55 | font-style: normal; 56 | text-rendering: optimizeLegibility; 57 | } 58 | -------------------------------------------------------------------------------- /client/js/main.js: -------------------------------------------------------------------------------- 1 | // Loader Event ************************************************************ 2 | 3 | $(window).on("load", () => { 4 | $("#preloader").css({ 5 | opacity: "0", 6 | visibility: "hidden", 7 | transitionDelay: "0.6s", 8 | }); 9 | $(".loader").css({ 10 | opacity: "0", 11 | transitionDelay: "0.3s", 12 | }); 13 | $("main").css({ 14 | opacity: "1", 15 | visibility: "visible", 16 | transitionDelay: "0.8s", 17 | }); 18 | 19 | setTimeout(() => { 20 | $(".loaded").addClass("active"); 21 | }, 1000); 22 | }); 23 | 24 | // Menu Btn Click ********************************************************** 25 | 26 | $(".menu_icon").click(function () { 27 | $(".menu_candy").toggleClass("menu_active"); 28 | $("#backdrop_bg").toggleClass("backdrop_active"); 29 | }); 30 | $(".nav_items .nav_links").click(function () { 31 | $(".menu_candy").removeClass("menu_active"); 32 | $("#backdrop_bg").removeClass("backdrop_active"); 33 | }); 34 | 35 | // Swal Alert Msg ********************************************************** 36 | 37 | $("a[href='javascript:void(0)']").click(() => { 38 | swal("Sorry", "We are working on it!"); 39 | }); 40 | 41 | // Search Function of Library ********************************************** 42 | 43 | $("form input#search").on("keyup", function () { 44 | let value = $(this).val().toLowerCase(); 45 | $("div.lib_card").filter(function () { 46 | $(this).toggle($(this).find("h2").text().toLowerCase().indexOf(value) > -1); 47 | }); 48 | }); 49 | 50 | // Go Back ***************************************************************** 51 | 52 | $("a.btn_back").click(() => { 53 | window.history.back(); 54 | }); 55 | 56 | // Source Change of Text Object SVG **************************************** 57 | 58 | $(window).ready(function () { 59 | if (screen.width < 992) { 60 | $("object.text").attr("data", "./img/text_portrait.svg"); 61 | } else { 62 | $("object.text").attr("data", "./img/text_landscape.svg"); 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /client/js/dots.js: -------------------------------------------------------------------------------- 1 | /* 2 | particlesJS.load('particles-js', 'particles.json', function() { 3 | console.log('particles.js loaded - callback'); 4 | }); 5 | */ 6 | 7 | /* Particles/Dots for Index Page Animation */ 8 | 9 | // Dots (Index Page) || Id: "dots-js" 10 | 11 | particlesJS( 12 | "dots-js", 13 | 14 | { 15 | particles: { 16 | number: { 17 | value: 30, 18 | density: { 19 | enable: true, 20 | value_area: 600, 21 | }, 22 | }, 23 | color: { 24 | value: "#E8FFFF", 25 | }, 26 | shape: { 27 | type: "circle", 28 | stroke: { 29 | width: 0, 30 | color: "#000000", 31 | }, 32 | polygon: { 33 | nb_sides: 6, 34 | }, 35 | image: { 36 | src: "img/logo.svg", 37 | width: 50, 38 | height: 50, 39 | }, 40 | }, 41 | opacity: { 42 | value: 1, 43 | random: true, 44 | anim: { 45 | enable: true, 46 | speed: 1, 47 | opacity_min: 0.4, 48 | sync: false, 49 | }, 50 | }, 51 | size: { 52 | value: 8, 53 | random: true, 54 | anim: { 55 | enable: true, 56 | speed: 10, 57 | size_min: 0.1, 58 | sync: false, 59 | }, 60 | }, 61 | line_linked: { 62 | enable: false, 63 | distance: 150, 64 | color: "#ffffff", 65 | opacity: 0.4, 66 | width: 1, 67 | }, 68 | move: { 69 | enable: true, 70 | speed: 8, 71 | direction: "top", 72 | random: true, 73 | straight: false, 74 | out_mode: "out", 75 | attract: { 76 | enable: false, 77 | rotateX: 600, 78 | rotateY: 1200, 79 | }, 80 | }, 81 | }, 82 | interactivity: { 83 | detect_on: "canvas", 84 | events: { 85 | onhover: { 86 | enable: false, 87 | mode: "repulse", 88 | }, 89 | onclick: { 90 | enable: false, 91 | mode: "push", 92 | }, 93 | resize: true, 94 | }, 95 | modes: { 96 | grab: { 97 | distance: 400, 98 | line_linked: { 99 | opacity: 1, 100 | }, 101 | }, 102 | bubble: { 103 | distance: 400, 104 | size: 40, 105 | duration: 2, 106 | opacity: 8, 107 | speed: 3, 108 | }, 109 | repulse: { 110 | distance: 200, 111 | }, 112 | push: { 113 | particles_nb: 4, 114 | }, 115 | remove: { 116 | particles_nb: 2, 117 | }, 118 | }, 119 | }, 120 | retina_detect: true, 121 | config_demo: { 122 | hide_card: false, 123 | background_color: "#fafafa", 124 | background_image: "", 125 | background_position: "50% 50%", 126 | background_repeat: "no-repeat", 127 | background_size: "cover", 128 | }, 129 | } 130 | ); 131 | -------------------------------------------------------------------------------- /client/js/components/responsive.js: -------------------------------------------------------------------------------- 1 | /*====================================================================================================================*/ 2 | 3 | // Site Responsive JS : If not responsive apply this js file to the site. 4 | /* */ 5 | 6 | // Responsive Jquery Function 7 | 8 | // Browser Load/Ready 9 | $(window).ready(function () { 10 | var width = window.outerWidth; 11 | 12 | if ($(this).width() < 992) { 13 | swal({ 14 | title: "Opps! Sorry:(", 15 | text: 16 | "My Site is yet not Responsive for your Display of " + 17 | width + 18 | "PX.", 19 | icon: "info", 20 | buttons: "Alright!", 21 | }).then((e) => { 22 | swal({ 23 | title: "Phew!", 24 | text: "Do you want to close this Window/Site?", 25 | icon: "warning", 26 | buttons: ["Not Now", "Close"], 27 | }).then((close) => { 28 | if (close) { 29 | window.close(); 30 | } else { 31 | swal( 32 | "Okay, You can manually close it by yourself! \n Thank You for Visiting (:", 33 | { button: "Okay!" } 34 | ); 35 | } 36 | }); 37 | }); 38 | 39 | $("main").hide(); 40 | } else { 41 | $("main").show(); 42 | } 43 | }); 44 | 45 | // Browser Resize 46 | $(window).resize(function () { 47 | var width = window.outerWidth; 48 | 49 | if ($(this).width() < 992) { 50 | swal({ 51 | title: "Opps! Sorry:(", 52 | text: 53 | "My Site is yet not Responsive for your Display of " + 54 | width + 55 | "PX.", 56 | icon: "info", 57 | buttons: "Alright!", 58 | }).then((e) => { 59 | swal({ 60 | title: "Phew!", 61 | text: "Do you want to close this Window/Site?", 62 | icon: "warning", 63 | buttons: ["Not Now", "Close"], 64 | }).then((close) => { 65 | if (close) { 66 | window.close(); 67 | } else { 68 | swal( 69 | "Okay, You can manually close it by yourself! \n Thank You for Visiting (:", 70 | { button: "Okay!" } 71 | ); 72 | } 73 | }); 74 | }); 75 | 76 | $("main").hide(); 77 | } else { 78 | $("main").show(); 79 | } 80 | }); 81 | 82 | /*====================================================================================================================*/ 83 | -------------------------------------------------------------------------------- /client/data/fonts.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All Fonts Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let fontsData = [ 6 | { 7 | id: 1, 8 | lib_name: "Google Fonts", 9 | lib_details: 10 | "Google Fonts makes it easy to bring personality and performance to your websites and products.", 11 | lib_link: "https://fonts.google.com/", 12 | }, 13 | { 14 | id: 2, 15 | lib_name: "Font Space", 16 | lib_details: 17 | "Free downloads of legally licensed fonts that are perfect for your design projects.", 18 | lib_link: "https://www.fontspace.com/", 19 | }, 20 | { 21 | id: 3, 22 | lib_name: "Freepik Fonts", 23 | lib_details: 24 | "Discover our fonts and, include them in your projects and make incredible designs!", 25 | lib_link: "https://www.freepik.com/fonts", 26 | }, 27 | { 28 | id: 4, 29 | lib_name: "Font Fabric", 30 | lib_details: 31 | "A digital type foundry crafting retail fonts and custom typography for various brands.", 32 | lib_link: "https://www.fontfabric.com/", 33 | }, 34 | { 35 | id: 5, 36 | lib_name: "Envato Fonts", 37 | lib_details: "Stunning Premium Fonts for every project.", 38 | lib_link: "https://elements.envato.com/fonts", 39 | }, 40 | { 41 | id: 6, 42 | lib_name: "Font Bundles", 43 | lib_details: "The Go-to Marketplace for Premium & Affordable Font Resources.", 44 | lib_link: "https://fontbundles.net/", 45 | }, 46 | { 47 | id: 7, 48 | lib_name: "Dafont", 49 | lib_details: "Free fonts for everyone to use, get it here.", 50 | lib_link: "https://www.dafont.com/", 51 | }, 52 | { 53 | id: 8, 54 | lib_name: "Font Squirrel", 55 | lib_details: "Free fonts for everyone to use, get it here.", 56 | lib_link: "https://www.fontsquirrel.com/", 57 | }, 58 | { 59 | id: 9, 60 | lib_name: "Urban Fonts", 61 | lib_details: "Free fonts for everyone to use, get it here.", 62 | lib_link: "https://www.urbanfonts.com/", 63 | }, 64 | { 65 | id: 10, 66 | lib_name: "Cufon Fonts", 67 | lib_details: "Free fonts for everyone to use, get it here.", 68 | lib_link: "https://www.cufonfonts.com/", 69 | }, 70 | ]; 71 | 72 | /* ********************************************************** */ 73 | // All Fonts Libraries Preview Mapping 74 | /* ********************************************************** */ 75 | 76 | let fontsLibrary = document.querySelector(".libraries"); 77 | 78 | Object.values(fontsData).map((val) => { 79 | fontsLibrary.innerHTML += ` 80 | 81 |
82 |

${val.lib_name}

83 |

${val.lib_details}

84 | 85 | See Now 86 | 87 |
88 | `; 89 | }); 90 | -------------------------------------------------------------------------------- /client/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Not Found 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 |
66 | 67 | 68 |
69 | 70 | 71 | 72 |
73 |
74 |
75 | 4 76 | 0 77 | 4 78 |
79 |

Page Not Found

80 |

The page you are looking for is unavailable.

81 | Go Back! 82 |
83 |
84 | 85 | 86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainer is responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainer have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project lead at imniladrimondal@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project contributors who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | For answers to common questions about this code of conduct, see 69 | https://www.contributor-covenant.org/faq 70 | 71 | [![GitHub License](https://img.shields.io/github/license/imniladri/Devhub.svg?style=for-the-badge&color=3DB2FF)](https://github.com/imniladri/Devhub/blob/master/LICENSE.txt) 72 | -------------------------------------------------------------------------------- /client/issue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Add New Lib | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 |
66 | 67 | 68 |
69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 |
77 | 85 |
86 | 87 | 88 | 89 |
90 | 91 |
92 | 93 | 94 | 95 | 104 | 105 | 106 |
107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /client/css/pages/error.css: -------------------------------------------------------------------------------- 1 | /* *********************** Error 404 Page Styles *********************** */ 2 | 3 | section#error_404 { 4 | position: relative; 5 | width: 100%; 6 | height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | div#dots-js { 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | width: 100%; 17 | height: 100%; 18 | z-index: -1; 19 | } 20 | 21 | div.error_404 { 22 | margin: 4rem auto; 23 | padding: 6rem 2rem; 24 | position: relative; 25 | width: 80%; 26 | height: 85vh; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | flex-direction: column; 31 | 32 | /* Glass Effect */ 33 | border-radius: 16px; 34 | background: rgba(255, 255, 255, 0.1); 35 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0px 0px 40px 20px rgba(255, 255, 255, 0.2); 36 | border: 2px solid rgba(255, 255, 255, 0.7); 37 | backdrop-filter: blur(10px); 38 | -webkit-backdrop-filter: blur(10px); 39 | } 40 | 41 | div.error_404 .text { 42 | margin: auto; 43 | margin-bottom: -5rem; 44 | width: 100%; 45 | height: auto; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | div.error_404 .text img { 52 | margin: 0 1rem; 53 | width: 22rem; 54 | height: auto; 55 | transform: translateY(-2rem); 56 | } 57 | 58 | div.error_404 .text span { 59 | margin: 0 1rem; 60 | font-size: 20rem; 61 | font-weight: 600; 62 | font-family: "Spectron", sans-serif; 63 | color: var(--primarywhite); 64 | text-align: center; 65 | } 66 | 67 | div.error_404 h2 { 68 | margin: 1rem auto; 69 | font-size: 8rem; 70 | font-weight: 400; 71 | font-family: "Spoiled", sans-serif; 72 | color: var(--primarywhite); 73 | letter-spacing: 3px; 74 | text-align: center; 75 | } 76 | 77 | div.error_404 p { 78 | margin: 1rem auto; 79 | font-size: 2rem; 80 | font-weight: 400; 81 | font-family: "Astromax", sans-serif; 82 | color: var(--lightwhite); 83 | letter-spacing: 3px; 84 | text-align: center; 85 | } 86 | 87 | div.error_404 a { 88 | position: relative; 89 | margin: 1.5rem auto; 90 | padding: 1.8rem 4.4rem 1.4rem; 91 | font-size: 2rem; 92 | font-weight: 700; 93 | font-family: "Liber", sans-serif; 94 | color: var(--primarywhite); 95 | border-radius: 50px; 96 | background: rgba(255, 255, 255, 0.15); 97 | box-shadow: 0 4px 20px rgb(0 0 0 / 20%), inset 0px 0px 10px 2px rgb(255 255 255 / 20%); 98 | letter-spacing: 1px; 99 | text-align: center; 100 | text-decoration: none; 101 | user-select: none; 102 | transition: all 0.1s ease-in-out; 103 | } 104 | 105 | div.error_404 a::before { 106 | content: ""; 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100%; 112 | border: 2.5px solid var(--primarywhite); 113 | opacity: 0.4; 114 | border-radius: 50px; 115 | transition: all 0.1s ease-in-out; 116 | } 117 | 118 | div.error_404 a:hover { 119 | background: rgba(255, 255, 255, 0.2); 120 | } 121 | 122 | div.error_404 a:hover:before { 123 | opacity: 0.8; 124 | } 125 | 126 | /* ************************* Responsive Media ************************* */ 127 | 128 | @media (max-width: 992px) { 129 | div.error_404 { 130 | width: 90%; 131 | } 132 | div.error_404 .text img { 133 | width: 20rem; 134 | } 135 | div.error_404 .text span { 136 | font-size: 20rem; 137 | } 138 | div.error_404 h2 { 139 | font-size: 8rem; 140 | } 141 | div.error_404 p { 142 | font-size: 2rem; 143 | } 144 | div.error_404 a { 145 | padding: 1.4rem 2.4rem 1rem; 146 | } 147 | } 148 | 149 | @media (max-width: 768px) { 150 | div.error_404 .text img { 151 | width: 18rem; 152 | } 153 | div.error_404 .text span { 154 | font-size: 18rem; 155 | } 156 | div.error_404 h2 { 157 | font-size: 6rem; 158 | } 159 | } 160 | 161 | @media (max-width: 572px) { 162 | div.error_404 { 163 | padding: 14rem 2rem; 164 | } 165 | div.error_404 .text { 166 | margin-bottom: -3rem; 167 | } 168 | div.error_404 .text img { 169 | width: 12rem; 170 | } 171 | div.error_404 .text span { 172 | font-size: 12rem; 173 | margin: 0; 174 | } 175 | div.error_404 h2 { 176 | font-size: 4rem; 177 | } 178 | div.error_404 p { 179 | font-size: 1.7rem; 180 | } 181 | } 182 | 183 | /* **************************** Styles End **************************** */ 184 | -------------------------------------------------------------------------------- /client/css/components/loader.css: -------------------------------------------------------------------------------- 1 | /*==================================== Loader =====================================*/ 2 | 3 | #preloader { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | backdrop-filter: blur(40px); 13 | -webkit-backdrop-filter: blur(40px); 14 | opacity: 1; 15 | visibility: visible; 16 | z-index: 9999; 17 | transition: all 0.6s ease-in-out; 18 | } 19 | 20 | /* **************** Loader Container **************** */ 21 | 22 | .loader { 23 | position: relative; 24 | width: 30rem; 25 | height: 30rem; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | opacity: 1; 30 | transform: rotate(45deg); 31 | transition: all 0.3s ease-in-out; 32 | 33 | /* Glass Effect */ 34 | border-radius: 20px; 35 | background: rgba(255, 255, 255, 0.15); 36 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0px 0px 40px 10px rgba(255, 255, 255, 0.1); 37 | border: 2px solid rgba(255, 255, 255, 0.6); 38 | backdrop-filter: blur(10px); 39 | -webkit-backdrop-filter: blur(10px); 40 | } 41 | 42 | @media (max-width: 768px) { 43 | .loader { 44 | width: 25rem; 45 | height: 25rem; 46 | } 47 | } 48 | 49 | @media (max-width: 472px) { 50 | .loader { 51 | width: 20rem; 52 | height: 20rem; 53 | } 54 | } 55 | 56 | /* **************** Loader Dot Frames **************** */ 57 | 58 | .loader .dot-1 { 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | z-index: 3; 64 | width: 40px; 65 | height: 40px; 66 | background: var(--primarywhite); 67 | border-radius: 50%; 68 | animation-fill-mode: both; 69 | animation: dot-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 70 | } 71 | 72 | .loader .dot-2 { 73 | position: absolute; 74 | top: 50%; 75 | left: 50%; 76 | transform: translate(-50%, -50%); 77 | z-index: 2; 78 | width: 70px; 79 | height: 70px; 80 | background: transparent; 81 | border-radius: 50%; 82 | animation-fill-mode: both; 83 | animation: dot-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 84 | } 85 | 86 | .loader .dot-3 { 87 | position: absolute; 88 | top: 50%; 89 | left: 50%; 90 | transform: translate(-50%, -50%); 91 | z-index: 1; 92 | width: 110px; 93 | height: 110px; 94 | background: rgba(255, 255, 255, 0.05); 95 | border-radius: 50%; 96 | animation-fill-mode: both; 97 | animation: dot-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 98 | } 99 | 100 | /* **************** Loader Dot Animation **************** */ 101 | 102 | @keyframes dot-1 { 103 | 0%, 104 | 70% { 105 | transform: translate(-50%, -50%) scale(0); 106 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 107 | } 108 | 109 | 100% { 110 | transform: translate(-50%, -50%) scale(1); 111 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 112 | } 113 | } 114 | 115 | @keyframes dot-2 { 116 | 0%, 117 | 40% { 118 | transform: translate(-50%, -50%) scale(0); 119 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 120 | } 121 | 122 | 100% { 123 | transform: translate(-50%, -50%) scale(1); 124 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 125 | } 126 | } 127 | 128 | @keyframes dot-3 { 129 | 0%, 130 | 10% { 131 | transform: translate(-50%, -50%) scale(0); 132 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 133 | } 134 | 135 | 100% { 136 | transform: translate(-50%, -50%) scale(1); 137 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 138 | } 139 | } 140 | 141 | /* **************** Loader Text **************** */ 142 | 143 | .loader h2 { 144 | font-size: 4rem; 145 | font-weight: 600; 146 | font-family: "Astromax", sans-serif; 147 | color: var(--primarywhite); 148 | letter-spacing: 2px; 149 | text-align: center; 150 | transform: translate(8rem, 8rem) rotate(-45deg); 151 | background: linear-gradient( 152 | 90deg, 153 | rgba(255, 255, 255, 0.6) 30%, 154 | rgba(255, 255, 255, 1) 50%, 155 | rgba(255, 255, 255, 0.6) 70% 156 | ); 157 | background-size: 200%; 158 | background-clip: text; 159 | -webkit-background-clip: text; 160 | -webkit-text-fill-color: transparent; 161 | animation: shine 2s linear infinite; 162 | } 163 | 164 | @keyframes shine { 165 | 0% { 166 | background-position: 150%; 167 | } 168 | 100% { 169 | background-position: -50%; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /client/img/text_portrait.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 75 | 76 | 77 | 86 | 87 | Dev Hub 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /client/img/text_landscape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 75 | 76 | 77 | 86 | 87 | Dev Hub 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /client/img/lang/icon6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | 17 |

Dev Hub: A Awesome Hub for all Developers

18 |
19 | Frame 20 |
21 |
22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | ## About The Project 30 | 31 | Dev Hub is a coolest hub for all developers to get any kind of libraries & packages. And it's very easy and fast way to get them all in one place. We will include more libraries for each section & update soon. Also we are working on some cool code snippets that are used daily on live projects. 32 | 33 | Libraries for CSS, JS, ICON, IMAGES, ANDROID, ML, API etc. 34 | 35 | Note: `Next Js` version coming soon with more features, under development. 36 | 37 | 38 | 39 | ## Built With 40 | 41 | All Tech Stacks that are using in this project: 42 | 43 | - HTML5 44 | - CSS3 45 | - Javascript | Jquery 46 | - SVG 47 | 48 | Other tools you need know: 49 | 50 | - Figma 51 | - Illustrator 52 | 53 | Here it seems that the main moto is to make the frontend awesome. 54 | 55 | 56 | 57 | ## Folder Structure 58 | 59 | ``` 60 | ├── client/ 61 | ├── assets/ Other Resources Files 62 | ├── css/ 63 | ├── components/ Css Component Files (header, footer, settings, loader) 64 | ├── libraries/ Css External Library Files 65 | ├── pages/ Css Main Site Page's Files 66 | ├── scss/ Sass Files 67 | ├── data/ Page Data Mapping Files [*.data.js] 68 | ├── fonts/ External Fonts 69 | ├── img/ All Images Files 70 | ├── js/ 71 | ├── components/ Js Component Files (secure, responsive) 72 | ├── libraries/ Js External Library Files 73 | ├── src/ All Site Pages (css, js, img, icon) 74 | ├── index.html Main Home Page 75 | ├── (Other Pages) Extra Pages (404, new) 76 | ``` 77 | 78 | 79 | 80 | ### Before You Start 81 | 82 | - Try to maintain the file format & folder structure. 83 | - Try to maintain proper file names. 84 | - Don't use capital or spaces for files names instead use `_` or `-`. 85 | 86 | 87 | 88 | ## Getting Started 89 | 90 | Please follow these simple steps to start working: 91 | 92 | 1. If you want to work on issue then comment, then if you get assigned. 93 | 2. Fork this Repo and clone your forked copy of the project. 94 | 3. Navigate to your project directory and open it in your code editor. 95 | 4. Always take a pull from the upstream repository to your main branch to keep it at par with the main project (updated repository). 96 | 5. Create a new branch and name it as according to the issue. 97 | 6. Start making your changes & after making changes. 98 | 7. Open a Pull Request with a name of the issue and describe about your changes with reasons. 99 | 100 | ### Add Your Name 101 | 102 | Once your PR got merged, do not forget to add your name in `CONTRIBUTING` file. Further instructions are mentioned there. 103 | 104 | 105 | 106 | ## Roadmap 107 | 108 | See the [open issues](https://github.com/imniladri/DevHub/issues) for a full list of proposed features (and known issues). 109 | 110 | - [ ] Documentation at some places. 111 | - [ ] Addition of Some Cool Styles. 112 | - [ ] Addition of More Useful Libraries. 113 | - [ ] Give Chance to user to add their Library. 114 | - [ ] More Features for More Interactivity in Site. 115 | - [ ] Developing in `Next Js` with more features. 116 | 117 | 118 | 119 | ## Contact 120 | 121 | ### [Niladri Mondal](https://imniladri.in/) 122 | 123 | [![](https://img.shields.io/badge/Skype_Me-00AFF0?style=for-the-badge)](https://join.skype.com/invite/x4ZrtKrM5uyv) 124 | [![](https://img.shields.io/badge/Mail_Me-1A374D?style=for-the-badge)](mailto:imniladrimondal@gmail.com) 125 | [![](https://img.shields.io/badge/Project_Link-EF4041?style=for-the-badge)](https://github.com/imniladri/DevHub) 126 | 127 | 128 | 129 | [contributors-shield]: https://img.shields.io/github/contributors/imniladri/DevHub.svg?style=for-the-badge&color 130 | [contributors-url]: https://github.com/imniladri/DevHub/graphs/contributors 131 | [forks-shield]: https://img.shields.io/github/forks/imniladri/DevHub.svg?style=for-the-badge&color=FFE400 132 | [forks-url]: https://github.com/imniladri/DevHub/network/members 133 | [stars-shield]: https://img.shields.io/github/stars/imniladri/DevHub.svg?style=for-the-badge&color=FFE400 134 | [stars-url]: https://github.com/imniladri/DevHub/stargazers 135 | [issues-shield]: https://img.shields.io/github/issues/imniladri/DevHub.svg?style=for-the-badge&color 136 | [issues-url]: https://github.com/imniladri/DevHub/issues 137 | [license-shield]: https://img.shields.io/github/license/imniladri/DevHub.svg?style=for-the-badge&color=3DB2FF 138 | [license-url]: https://github.com/imniladri/DevHub/blob/master/LICENSE.txt 139 | [skype-shield]: https://img.shields.io/badge/-Skype-white.svg?style=for-the-badge&logo=skype&logoColor=fff&color=00AFF0 140 | [skype-url]: https://join.skype.com/invite/x4ZrtKrM5uyv 141 | -------------------------------------------------------------------------------- /client/src/mlpack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ML | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | ML Lib Img 114 |

ML Libraries

115 |

ML Libraries are a collection of ML files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/apipack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | API Lib Img 114 |

API Libraries

115 |

API Libraries are a collection of API files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/csspack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | CSS Lib Img 114 |

CSS Libraries

115 |

CSS Libraries are a collection of CSS files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/jspack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Javascript | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | JS Lib Img 114 |

JS Libraries

115 |

JS Libraries are a collection of JS files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/iconpack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Icons | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | Icon Lib Img 114 |

Icon Libraries

115 |

Icon Libraries are a collection of Icon files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/fontspack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fonts | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | Fonts Lib Img 114 |

Fonts Libraries

115 |

Fonts Libraries are a collection of Fonts files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/imgpack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Images | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | Img Lib Img 114 |

Image Libraries

115 |

Image Libraries are a collection of Image files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/src/androidpack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Android | Dev Hub 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 105 |
106 | 107 | 108 | 109 |
110 | 111 | 112 |
113 | Android Lib Img 114 |

Android Libraries

115 |

Android Libraries are a collection of Android files that can be used to create a projects.

116 | 117 | 118 |
119 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 | 142 | 143 | 144 |
145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /client/data/ml.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All ML Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let mlData = [ 6 | { 7 | id: 1, 8 | lib_name: "NumPy", 9 | lib_details: 10 | "Numpy is used for handling multi-dimensional data and intricate mathematical functions.", 11 | lib_link: "https://numpy.org/", 12 | }, 13 | { 14 | id: 2, 15 | lib_name: "Pandas", 16 | lib_details: "Pandas is used for data manipulation for numerical data and time series.", 17 | lib_link: "https://pandas.pydata.org/", 18 | }, 19 | { 20 | id: 3, 21 | lib_name: "SciPy", 22 | lib_details: 23 | "Scipy is one of the leading machine libraries for accomplishing scientific computation.", 24 | lib_link: "https://scipy.org/", 25 | }, 26 | { 27 | id: 4, 28 | lib_name: "Matplotlib", 29 | lib_details: 30 | "Matplotlib is a ML library employed for producing publication-ready figures, images, and plots in a range of formats via 2D plotting.", 31 | lib_link: "https://matplotlib.org/", 32 | }, 33 | { 34 | id: 5, 35 | lib_name: "Scikit-Learn", 36 | lib_details: 37 | "Scikit-learn provides a simple yet powerful fit-transform and predict paradigm to learn from data, transform the data and finally predict.", 38 | lib_link: "https://scikit-learn.org/", 39 | }, 40 | { 41 | id: 6, 42 | lib_name: "Statsmodels", 43 | lib_details: 44 | "Statsmodels provides an extensive list of capabilities in the form of regression models, time series analysis, autoregression and so on.", 45 | lib_link: "https://www.statsmodels.org/", 46 | }, 47 | { 48 | id: 7, 49 | lib_name: "XGBoost", 50 | lib_details: 51 | "One of the most widely used libraries/algorithms used in various data science competitions and real-world use cases", 52 | lib_link: "https://xgboost.readthedocs.io/", 53 | }, 54 | { 55 | id: 8, 56 | lib_name: "LightGBM", 57 | lib_details: 58 | "Another distributed and fast variant of GBM (Gradient Boosting Machines), LightGBM is from the house of Microsoft.", 59 | lib_link: "https://lightgbm.readthedocs.io/", 60 | }, 61 | { 62 | id: 9, 63 | lib_name: "ELI5", 64 | lib_details: 65 | "ELI5 is one such library which provides the capabilities to debug classifiers and provide an explanation around the predictions.", 66 | lib_link: "https://github.com/TeamHG-Memex/eli5", 67 | }, 68 | { 69 | id: 10, 70 | lib_name: "Tensorflow", 71 | lib_details: 72 | "One of the most widely used libraries for both research and production environments.", 73 | lib_link: "https://www.tensorflow.org/", 74 | }, 75 | { 76 | id: 11, 77 | lib_name: "PyTorch", 78 | lib_details: 79 | "Pytorch is a Facebook-developed ML library that is based on the Torch Library.", 80 | lib_link: "https://pytorch.org/", 81 | }, 82 | { 83 | id: 12, 84 | lib_name: "Keras", 85 | lib_details: 86 | "Keras provides a Python interface of Tensorflow Library especially focused on AI neural networks", 87 | lib_link: "https://keras.io/", 88 | }, 89 | { 90 | id: 13, 91 | lib_name: "MlPack", 92 | lib_details: 93 | "MlPack is mostly C++-based ML library that has bindings to Python other languages including R programming, Julia, and GO.", 94 | lib_link: "https://github.com/mlpack/mlpack", 95 | }, 96 | { 97 | id: 14, 98 | lib_name: "Armadillo", 99 | lib_details: 100 | "Armadillo is a linear algebra library employed for accomplishing the purposes of scientific computing.", 101 | lib_link: "http://arma.sourceforge.net/", 102 | }, 103 | { 104 | id: 15, 105 | lib_name: "NLTK", 106 | lib_details: 107 | "NLTK is the widely used library for Text Classification and Natural Language Processing.", 108 | lib_link: "https://www.nltk.org/", 109 | }, 110 | { 111 | id: 16, 112 | lib_name: "Gensim", 113 | lib_details: 114 | "Gensim is a fast and production ready NLP library. It is particularly designed for unsupervised topic modeling tasks apart from the usual set of NLP tasks.", 115 | lib_link: "https://radimrehurek.com/gensim/", 116 | }, 117 | { 118 | id: 17, 119 | lib_name: "Seaborn", 120 | lib_details: 121 | "Seaborn is a library for making statistical graphics in Python. It builds on top of matplotlib and integrates closely with pandas data structures.", 122 | lib_link: "http://seaborn.pydata.org/", 123 | }, 124 | { 125 | id: 18, 126 | lib_name: "Plotly", 127 | lib_details: 128 | "Plotly is a production grade visualization platform with wrappers in not just python but other languages like R, Julia, MATLAB, etc.", 129 | lib_link: "https://plot.ly/", 130 | }, 131 | { 132 | id: 19, 133 | lib_name: "OpenCV", 134 | lib_details: 135 | "OpenCV is an open-source platform dedicated to computer vision and image processing.", 136 | lib_link: "https://opencv.org/", 137 | }, 138 | { 139 | id: 20, 140 | lib_name: "OpenNN", 141 | lib_details: 142 | "OpenNN is an open-source ML library that leverages ML techniques for solving data mining and predictive analytics problems across various fields.", 143 | lib_link: "https://www.opennn.net/", 144 | }, 145 | { 146 | id: 21, 147 | lib_name: "Theano", 148 | lib_details: 149 | "Theano is one of the speediest machine learning libraries for manipulating and evaluating mathematical expressions", 150 | lib_link: "https://developers.google.com/fonts/docs/developer_api", 151 | }, 152 | ]; 153 | 154 | /* ********************************************************** */ 155 | // All ML Libraries Preview Mapping 156 | /* ********************************************************** */ 157 | 158 | let mlLibrary = document.querySelector(".libraries"); 159 | 160 | Object.values(mlData).map((val) => { 161 | mlLibrary.innerHTML += ` 162 | 163 |
164 |

${val.lib_name}

165 |

${val.lib_details}

166 | 167 | See Now 168 | 169 |
170 | `; 171 | }); 172 | -------------------------------------------------------------------------------- /client/css/pages/library.css: -------------------------------------------------------------------------------- 1 | /* **************************** Libraries Page Styles **************************** */ 2 | 3 | section#libraries { 4 | position: relative; 5 | margin: 10rem auto; 6 | } 7 | 8 | div#dots-js { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | z-index: -1; 15 | } 16 | 17 | /* **************************** Library Header **************************** */ 18 | 19 | section#libraries div.lib_header { 20 | position: relative; 21 | margin: 6rem auto; 22 | padding: 1rem; 23 | display: flex; 24 | align-content: center; 25 | justify-content: center; 26 | align-items: center; 27 | flex-direction: column; 28 | width: 90%; 29 | height: auto; 30 | 31 | /* Glass Effect */ 32 | border-radius: 12px; 33 | background: rgba(255, 255, 255, 0.1); 34 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0px 0px 40px 20px rgba(255, 255, 255, 0.2); 35 | border: 2px solid rgba(255, 255, 255, 0.7); 36 | backdrop-filter: blur(10px); 37 | -webkit-backdrop-filter: blur(10px); 38 | } 39 | 40 | div.lib_header img { 41 | margin: 2rem auto 1rem; 42 | width: 10rem; 43 | height: auto; 44 | } 45 | 46 | div.lib_header h2 { 47 | margin: 1rem auto; 48 | font-size: 5rem; 49 | font-weight: 500; 50 | font-family: "Astromax", sans-serif; 51 | color: var(--primarywhite); 52 | text-align: center; 53 | letter-spacing: 2px; 54 | } 55 | 56 | div.lib_header p { 57 | margin: 1rem auto; 58 | font-size: 1.8rem; 59 | font-weight: 700; 60 | font-family: "Liber", sans-serif; 61 | color: var(--primarygrey); 62 | text-align: center; 63 | letter-spacing: 1px; 64 | } 65 | 66 | div.lib_header form.searchbar { 67 | position: relative; 68 | margin: 2rem auto; 69 | width: 90%; 70 | } 71 | 72 | div.lib_header form.searchbar input { 73 | margin: auto; 74 | padding: 2.6rem 1.6rem; 75 | font-size: 2rem; 76 | font-weight: 500; 77 | font-family: var(--textfont); 78 | color: var(--primarywhite); 79 | letter-spacing: 0.8px; 80 | border-radius: 8px; 81 | background: rgba(255, 255, 255, 0.1); 82 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0px 0px 10px 2px rgba(255, 255, 255, 0.1); 83 | border: 2px solid rgba(255, 255, 255, 0.6); 84 | transition: all 0.2s ease-in-out; 85 | } 86 | 87 | div.lib_header form.searchbar input::placeholder { 88 | color: rgba(255, 255, 255, 0.6); 89 | } 90 | 91 | div.lib_header form.searchbar input:focus, 92 | div.lib_header form.searchbar input:not(:placeholder-shown) { 93 | border: 2px solid rgba(255, 255, 255, 0.8); 94 | } 95 | 96 | @media (max-width: 768px) { 97 | div.lib_header img { 98 | width: 8rem; 99 | } 100 | div.lib_header h2 { 101 | font-size: 4rem; 102 | letter-spacing: 1px; 103 | } 104 | div.lib_header p { 105 | margin: 0.5rem auto; 106 | font-size: 1.7rem; 107 | letter-spacing: 0.8px; 108 | } 109 | div.lib_header form.searchbar { 110 | width: 100%; 111 | } 112 | div.lib_header form.searchbar input { 113 | padding: 2.2rem 1.5rem; 114 | font-size: 1.8rem; 115 | } 116 | } 117 | 118 | /* **************************** Library Card **************************** */ 119 | 120 | section#libraries div.libraries { 121 | margin: 6rem auto; 122 | width: 90%; 123 | display: grid; 124 | grid-template-columns: repeat(3, 1fr); 125 | gap: 4rem; 126 | } 127 | 128 | div.libraries .lib_card { 129 | position: relative; 130 | margin: auto; 131 | padding: 2rem; 132 | display: flex; 133 | justify-content: center; 134 | align-items: center; 135 | flex-direction: column; 136 | width: -webkit-fill-available; 137 | height: -webkit-fill-available; 138 | 139 | /* Glass Effect */ 140 | border-radius: 12px; 141 | background: rgba(255, 255, 255, 0.1); 142 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0px 0px 40px 10px rgba(255, 255, 255, 0.1); 143 | backdrop-filter: blur(10px); 144 | -webkit-backdrop-filter: blur(10px); 145 | } 146 | 147 | div.libraries .lib_card::before { 148 | content: ""; 149 | position: absolute; 150 | top: 0; 151 | left: 0; 152 | width: 100%; 153 | height: 100%; 154 | border: 2.5px solid var(--primarywhite); 155 | opacity: 0.4; 156 | border-radius: 12px; 157 | transition: all 0.15s ease-in-out; 158 | } 159 | 160 | div.libraries .lib_card:hover:before { 161 | opacity: 0.8; 162 | } 163 | 164 | div.libraries .lib_card h2 { 165 | margin: 1rem auto; 166 | font-size: 2.6rem; 167 | font-weight: 500; 168 | font-family: var(--textfont); 169 | color: var(--primarywhite); 170 | text-align: center; 171 | letter-spacing: 1px; 172 | } 173 | 174 | div.libraries .lib_card p { 175 | margin: 0.5rem auto; 176 | font-size: 1.7rem; 177 | font-weight: 500; 178 | font-family: "Liber", sans-serif; 179 | color: var(--primarygrey); 180 | text-align: center; 181 | letter-spacing: 1px; 182 | line-height: 1.5; 183 | } 184 | 185 | div.libraries .lib_card a.lib_link { 186 | position: relative; 187 | margin: 1rem auto; 188 | padding: 0.8rem 2rem; 189 | font-size: 1.6rem; 190 | font-weight: 600; 191 | font-family: var(--textfont); 192 | color: var(--primarywhite); 193 | text-align: center; 194 | letter-spacing: 0.8px; 195 | text-transform: uppercase; 196 | border-radius: 12px; 197 | background: rgba(255, 255, 255, 0.15); 198 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0px 0px 10px 2px rgba(255, 255, 255, 0.2); 199 | transition: all 0.15s ease-in-out; 200 | z-index: 1; 201 | } 202 | 203 | div.libraries .lib_card a.lib_link:hover { 204 | background: rgba(255, 255, 255, 0.2); 205 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0px 0px 10px 2px rgba(255, 255, 255, 0.25); 206 | } 207 | 208 | div.libraries .lib_card a.lib_link::before { 209 | content: ""; 210 | position: absolute; 211 | top: 0; 212 | left: 0; 213 | width: 100%; 214 | height: 100%; 215 | border-radius: 12px; 216 | border: 2px solid var(--primarywhite); 217 | opacity: 0.4; 218 | transition: all 0.15s ease-in-out; 219 | } 220 | 221 | div.libraries .lib_card a.lib_link:hover:before { 222 | opacity: 0.6; 223 | } 224 | 225 | /* **************************** Responsive Media **************************** */ 226 | 227 | @media (max-width: 992px) { 228 | section#libraries div.libraries { 229 | grid-template-columns: repeat(2, 1fr); 230 | } 231 | } 232 | 233 | @media (max-width: 572px) { 234 | section#libraries div.libraries { 235 | grid-template-columns: repeat(1, 1fr); 236 | } 237 | } 238 | 239 | /* **************************** Styles End **************************** */ 240 | -------------------------------------------------------------------------------- /client/css/components/settings.css: -------------------------------------------------------------------------------- 1 | /* 2 | _____ _ _ _ 3 | / ____| | | | | (_) 4 | | (___ ___| |_| |_ _ _ __ __ _ ___ 5 | \___ \ / _ \ __| __| | '_ \ / _` / __| 6 | ____) | __/ |_| |_| | | | | (_| \__ \ 7 | |_____/ \___|\__|\__|_|_| |_|\__, |___/ 8 | __/ | 9 | |___/ 10 | */ 11 | 12 | /* **************************** Fonts **************************** */ 13 | 14 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap"); 15 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap"); 16 | @import url("../../fonts/Liber/Liber-Font.css"); 17 | 18 | /* **************************** Components Stylesheets **************************** */ 19 | 20 | @import url(./header.css); 21 | @import url(./footer.css); 22 | @import url(./loader.css); 23 | 24 | /* **************************** Site General Settings **************************** */ 25 | 26 | * { 27 | margin: 0; 28 | padding: 0; 29 | scroll-behavior: smooth; 30 | } 31 | 32 | /* **************************** Responsive Font Size **************************** */ 33 | 34 | html { 35 | font-size: 62.5%; 36 | } 37 | 38 | @media (max-width: 992px) { 39 | html { 40 | font-size: 60%; 41 | } 42 | } 43 | 44 | @media (max-width: 768px) { 45 | html { 46 | font-size: 55%; 47 | } 48 | } 49 | 50 | /* **************************** Body Settings **************************** */ 51 | 52 | body { 53 | font-family: var(--mainfont); 54 | background: var(--maincolor) url(../../img/bg_glass.png) no-repeat fixed center / cover; 55 | } 56 | 57 | main { 58 | opacity: 0; 59 | visibility: hidden; 60 | transition: all 0.6s ease-in-out; 61 | } 62 | 63 | /* **************************** Root Variables **************************** */ 64 | 65 | :root { 66 | /* Default Colors */ 67 | --primaryblack: #1b1d25; 68 | --primarywhite: #ffffff; 69 | --lightwhite: #f7fafc; 70 | --primarygrey: #bfc9d1; 71 | --maincolor: #420378; 72 | --primarycolor: #cbfa3a; 73 | 74 | /* Default Fonts */ 75 | --mainfont: "Montserrat", sans-serif; 76 | --textfont: "Outfit", sans-serif; 77 | } 78 | 79 | /* **************************** Scroll Bar **************************** */ 80 | 81 | ::-webkit-scrollbar { 82 | width: 6px; 83 | height: 6px; 84 | background: transparent; 85 | } 86 | 87 | ::-webkit-scrollbar-track { 88 | background: var(--maincolor); 89 | } 90 | 91 | ::-webkit-scrollbar-thumb { 92 | background: var(--primarywhite); 93 | } 94 | 95 | /* **************************** Selection **************************** */ 96 | 97 | ::selection { 98 | color: var(--primarywhite); 99 | background: rgba(255, 255, 255, 0.25); 100 | } 101 | 102 | /* **************************** User Select None **************************** */ 103 | 104 | img, 105 | object, 106 | .noselect { 107 | user-select: none; 108 | -webkit-user-select: none; 109 | -moz-user-select: none; 110 | -ms-user-select: none; 111 | } 112 | 113 | button.btn:active, 114 | button.btn:focus, 115 | a.btn:active, 116 | a.btn:focus { 117 | box-shadow: none; 118 | } 119 | 120 | /* **************************** Font Faces **************************** */ 121 | 122 | @font-face { 123 | font-family: "Spoiled"; 124 | src: url(../../fonts/Spoiled.otf) format("opentype"); 125 | font-style: normal; 126 | font-weight: normal; 127 | text-rendering: optimizeLegibility; 128 | } 129 | 130 | @font-face { 131 | font-family: "PerryWaters"; 132 | src: url(../../fonts/PerryWaters.woff) format("woff"), 133 | url(../../fonts/PerryWaters.otf) format("opentype"); 134 | font-style: normal; 135 | font-weight: normal; 136 | text-rendering: optimizeLegibility; 137 | } 138 | 139 | @font-face { 140 | font-family: "Astromax"; 141 | src: url(../../fonts/Astromax.woff) format("woff"), 142 | url(../../fonts/Astromax.ttf) format("truetype"); 143 | font-style: normal; 144 | font-weight: normal; 145 | text-rendering: optimizeLegibility; 146 | } 147 | 148 | @font-face { 149 | font-family: "Spectron"; 150 | src: url(../../fonts/Spectron.woff2) format("woff2"), 151 | url(../../fonts/Spectron.otf) format("opentype"); 152 | font-style: normal; 153 | font-weight: normal; 154 | text-rendering: optimizeLegibility; 155 | } 156 | 157 | /* **************************** Swal Alert **************************** */ 158 | 159 | div.swal-overlay { 160 | background: rgba(0, 0, 0, 0.2); 161 | box-shadow: inset 0px 0px 50px 20px rgba(0, 0, 0, 0.1); 162 | backdrop-filter: blur(10px); 163 | -webkit-backdrop-filter: blur(10px); 164 | } 165 | 166 | div.swal-overlay .swal-modal { 167 | margin: auto; 168 | padding: 1rem; 169 | border-radius: 20px; 170 | background: rgba(255, 255, 255, 0.1); 171 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 172 | border: 2px solid rgba(255, 255, 255, 0.2); 173 | } 174 | 175 | div.swal-overlay .swal-modal .swal-title { 176 | margin: auto; 177 | font-size: 4.5rem; 178 | font-weight: 400; 179 | font-family: "Spoiled", sans-serif; 180 | color: var(--primarywhite); 181 | -webkit-text-stroke: 0.8px var(--primarywhite); 182 | letter-spacing: 3px; 183 | text-align: center; 184 | } 185 | 186 | div.swal-overlay .swal-modal .swal-text { 187 | margin: -1rem auto; 188 | font-size: 2.1rem; 189 | font-weight: 500; 190 | font-family: "Liber", sans-serif; 191 | color: var(--lightwhite); 192 | letter-spacing: 0.8px; 193 | text-align: center; 194 | } 195 | 196 | div.swal-overlay .swal-modal .swal-footer { 197 | margin: 1rem auto 0; 198 | text-align: center; 199 | } 200 | 201 | div.swal-overlay .swal-modal .swal-button { 202 | position: relative; 203 | padding: 0.8rem 2rem; 204 | font: 600 1.8rem var(--textfont); 205 | color: var(--primarywhite); 206 | border-radius: 50px; 207 | background: rgba(255, 255, 255, 0.15); 208 | box-shadow: inset 60px 0px 10px 2px rgba(255, 255, 255, 0.2); 209 | transition: all 0.15s ease-in-out; 210 | } 211 | 212 | div.swal-overlay .swal-modal .swal-button:hover { 213 | background: rgba(255, 255, 255, 0.2); 214 | box-shadow: inset 60px 0px 10px 2px rgba(255, 255, 255, 0.3); 215 | } 216 | 217 | div.swal-overlay .swal-modal .swal-button::before { 218 | content: ""; 219 | position: absolute; 220 | top: 0; 221 | left: 0; 222 | width: 100%; 223 | height: 100%; 224 | border: none; 225 | border-right: 1.5px solid var(--primarywhite); 226 | border-bottom: 1.5px solid var(--primarywhite); 227 | opacity: 0.4; 228 | border-radius: 50px; 229 | } 230 | 231 | /* **************************** Styles End **************************** */ 232 | -------------------------------------------------------------------------------- /client/data/android.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All Android Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let androidData = [ 6 | { 7 | id: 1, 8 | lib_name: "Picasso", 9 | lib_details: 10 | " Picasso claims to allow for hassle-free image loading in the application—often in one line of code. ", 11 | lib_link: "https://square.github.io/picasso/", 12 | }, 13 | { 14 | id: 2, 15 | lib_name: "Glide", 16 | lib_details: 17 | "Glide is yet another praised image loader and one of the best new Android libraries for developers.", 18 | lib_link: "https://github.com/bumptech/glide", 19 | }, 20 | { 21 | id: 3, 22 | lib_name: "Zxing", 23 | lib_details: 24 | "ZXing is a barcode image-processing Android library that is implemented in Java.", 25 | lib_link: "https://github.com/zxing/zxing", 26 | }, 27 | { 28 | id: 4, 29 | lib_name: "CAMView", 30 | lib_details: 31 | "CAMView is an android camera easy access library and installed QR scanner, based on ZXing.", 32 | lib_link: "https://github.com/LivotovLabs/CamView", 33 | }, 34 | { 35 | id: 5, 36 | lib_name: "Stetho", 37 | lib_details: "Stetho is a sophisticated debug bridge for Android applications.", 38 | lib_link: "http://facebook.github.io/stetho/", 39 | }, 40 | { 41 | id: 6, 42 | lib_name: "ExoPlayer", 43 | lib_details: "ExoPlayer is an Android media player library developed by Google.", 44 | lib_link: "https://exoplayer.dev/hello-world.html", 45 | }, 46 | { 47 | id: 7, 48 | lib_name: "Dagger 2", 49 | lib_details: 50 | "Dagger 2 is mainly relies on using Java annotation processors that include compiling time in order to calculate and identify dependencies.", 51 | lib_link: "https://dagger.dev/", 52 | }, 53 | { 54 | id: 8, 55 | lib_name: "Retrofit", 56 | lib_details: 57 | "Retrofit is a type-safe REST client build by square for Android and Java which intends to make it simpler to expand RESTful web services.", 58 | lib_link: "https://square.github.io/retrofit/", 59 | }, 60 | 61 | { 62 | id: 9, 63 | lib_name: "Espresso", 64 | lib_details: 65 | "Espresso is an open source android user interface (UI) testing framework developed by Google.", 66 | lib_link: "https://developer.android.com/training/testing/espresso", 67 | }, 68 | { 69 | id: 10, 70 | lib_name: "Moshi", 71 | lib_details: 72 | "Moshi JSON library, created by Square, converts JSON into Java and Kotlin models where converting JSON to Java model (and vice versa) is straightforward.", 73 | lib_link: "https://github.com/square/moshi", 74 | }, 75 | { 76 | id: 11, 77 | lib_name: "Android Jetpack", 78 | lib_details: 79 | "Android Jetpack is a selection of software components which helps building reliable Android apps.", 80 | lib_link: "https://developer.android.com/jetpack", 81 | }, 82 | { 83 | id: 12, 84 | lib_name: "Android Databinding", 85 | lib_details: 86 | "Android DataBinding library allow you to bind UI elements in your layout to data sources in your app via declarative format. ", 87 | lib_link: "https://developer.android.com/topic/libraries/data-binding", 88 | }, 89 | { 90 | id: 13, 91 | lib_name: "RxJava", 92 | lib_details: 93 | "RxJava is an open source implementation of ReactiveX library for Java Virtual Machine (JVM). ", 94 | lib_link: "https://github.com/ReactiveX/RxJava", 95 | }, 96 | { 97 | id: 14, 98 | lib_name: "Room", 99 | lib_details: 100 | "Room is an official Android ORM-it relies a lot on annotations and standard SQL syntax while its APi is similar to Retrofit API", 101 | lib_link: "https://developer.android.com/jetpack/androidx/releases/room", 102 | }, 103 | { 104 | id: 15, 105 | lib_name: "Robolectric", 106 | lib_details: 107 | "Robolectric is a great library for unit testing and handling several aspects of Android apps including views, resource loading and more.", 108 | lib_link: "http://robolectric.org/", 109 | }, 110 | { 111 | id: 16, 112 | lib_name: "EventBus", 113 | lib_details: 114 | "An open-source library for Android and Java using the publisher/subscriber pattern for loose coupling", 115 | lib_link: "https://greenrobot.org/eventbus/", 116 | }, 117 | { 118 | id: 17, 119 | lib_name: "ButterKnife", 120 | lib_details: 121 | "Renowned view binding android support library helping in assigning ids to views very effortlessly", 122 | lib_link: "https://jakewharton.github.io/butterknife/", 123 | }, 124 | { 125 | id: 18, 126 | lib_name: "MPAndroidChart", 127 | lib_details: 128 | "Android chart/graph view library with radar, line, bar, bubble, pie, candlestick charts along with scaling, animations, and dragging", 129 | lib_link: 130 | "https://play.google.com/store/apps/details?id=com.xxmassdeveloper.mpchartexample&hl=en_IN&gl=US", 131 | }, 132 | { 133 | id: 19, 134 | lib_name: "MyLittleCanvas", 135 | lib_details: 136 | "Android Library used to achieve features such as custom underline on a TextView, Textshape, lineshape, etc.", 137 | lib_link: "https://github.com/florent37/MyLittleCanvas", 138 | }, 139 | { 140 | id: 20, 141 | lib_name: "GravityView", 142 | lib_details: "Gravity Forms collects data. GravityView displays the data.", 143 | lib_link: "https://gravityview.co/", 144 | }, 145 | { 146 | id: 21, 147 | lib_name: "Chuck", 148 | lib_details: "Simple in-app HTTP inspector for Android OkHttp clients", 149 | lib_link: "https://github.com/jgilfelt/chuck", 150 | }, 151 | { 152 | id: 22, 153 | lib_name: "ThreeTen", 154 | lib_details: "Date and time handling library for Android using java", 155 | lib_link: "https://www.threeten.org/", 156 | }, 157 | { 158 | id: 23, 159 | lib_name: "Timber", 160 | lib_details: 161 | "A logger with a small, extensible API which provides utility on top of Android's normal Log class.", 162 | lib_link: "https://github.com/JakeWharton/timber", 163 | }, 164 | { 165 | id: 24, 166 | lib_name: "Android KTX", 167 | lib_details: 168 | "Android KTX is a set of Kotlin extensions that wraps Android API, making it more user-friendly", 169 | lib_link: "https://github.com/android/android-ktx", 170 | }, 171 | ]; 172 | 173 | /* ********************************************************** */ 174 | // All Android Libraries Preview Mapping 175 | /* ********************************************************** */ 176 | 177 | let androidLibrary = document.querySelector(".libraries"); 178 | 179 | Object.values(androidData).map((val) => { 180 | androidLibrary.innerHTML += ` 181 | 182 |
183 |

${val.lib_name}

184 |

${val.lib_details}

185 | 186 | See Now 187 | 188 |
189 | `; 190 | }); 191 | -------------------------------------------------------------------------------- /client/css/components/header.css: -------------------------------------------------------------------------------- 1 | /* **************************** Header Section **************************** */ 2 | 3 | header { 4 | position: sticky; 5 | top: 3rem; 6 | z-index: 10; 7 | margin: auto; 8 | padding: 1.2rem 2rem; 9 | width: 90%; 10 | 11 | /* Glass Effect */ 12 | border-radius: 10px; 13 | background: rgba(255, 255, 255, 0.1); 14 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0px 0px 40px 20px rgba(255, 255, 255, 0.2); 15 | border: 2px solid rgba(255, 255, 255, 0.4); 16 | backdrop-filter: blur(10px); 17 | -webkit-backdrop-filter: blur(10px); 18 | } 19 | 20 | header nav { 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | } 25 | 26 | /* **************************** Header Backdrop Blur **************************** */ 27 | 28 | div#backdrop_bg { 29 | position: fixed; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100vh; 34 | backdrop-filter: blur(40px); 35 | -webkit-backdrop-filter: blur(40px); 36 | opacity: 0; 37 | visibility: hidden; 38 | z-index: 9; 39 | transition: all 0.4s ease-in-out; 40 | } 41 | 42 | div#backdrop_bg.backdrop_active { 43 | opacity: 1; 44 | visibility: visible; 45 | } 46 | 47 | /* **************************** Header Brand **************************** */ 48 | 49 | header nav a.nav_brand { 50 | display: flex; 51 | justify-content: center; 52 | align-items: center; 53 | text-decoration: none; 54 | user-select: none; 55 | } 56 | 57 | header nav a.nav_brand img { 58 | margin: auto; 59 | margin-right: 0.5rem; 60 | width: 4rem; 61 | height: auto; 62 | } 63 | 64 | header nav a.nav_brand h4 { 65 | margin: auto; 66 | margin-left: 0.5rem; 67 | margin-bottom: -1rem; 68 | font-size: 3.6rem; 69 | font-weight: 400; 70 | font-family: "Spoiled", sans-serif; 71 | color: var(--primarywhite); 72 | letter-spacing: 1px; 73 | } 74 | 75 | /* **************************** Header Menus & Btn **************************** */ 76 | 77 | header nav a.nav_btn, 78 | header nav div.nav_items a.nav_links { 79 | position: relative; 80 | margin: auto 0.8rem; 81 | padding: 0.8rem 1rem 0.5rem; 82 | font-size: 1.7rem; 83 | font-weight: 700; 84 | font-family: "Liber", sans-serif; 85 | color: var(--primarywhite); 86 | letter-spacing: 1.2px; 87 | text-align: center; 88 | text-decoration: none; 89 | border-radius: 6px; 90 | background: rgba(255, 255, 255, 0.1); 91 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0px 0px 20px 2px rgba(255, 255, 255, 0.2); 92 | transition: all 0.15s ease-in-out; 93 | } 94 | 95 | header nav a.nav_btn::before, 96 | header nav div.nav_items a.nav_links::before { 97 | content: ""; 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | width: 100%; 102 | height: 100%; 103 | border: 2px solid var(--primarywhite); 104 | opacity: 0.4; 105 | border-radius: 6px; 106 | transition: all 0.15s ease-in-out; 107 | } 108 | 109 | header nav a.nav_btn:hover, 110 | header nav div.nav_items a.nav_links:hover, 111 | header nav div.nav_items a.nav_links.active { 112 | background: rgba(255, 255, 255, 0.2); 113 | } 114 | 115 | header nav a.nav_btn:hover:before, 116 | header nav div.nav_items a.nav_links:hover:before, 117 | header nav div.nav_items a.nav_links.active:before { 118 | opacity: 0.8; 119 | } 120 | 121 | /* **************************** Header Candy **************************** */ 122 | 123 | header nav div.menu_icon { 124 | position: relative; 125 | width: 40px; 126 | height: 40px; 127 | display: flex; 128 | justify-content: center; 129 | align-items: center; 130 | color: var(--lightwhite); 131 | border-radius: 6px; 132 | background: rgba(255, 255, 255, 0.1); 133 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0px 0px 20px 2px rgba(255, 255, 255, 0.2); 134 | cursor: pointer; 135 | overflow: hidden; 136 | z-index: 10; 137 | } 138 | 139 | /* Icon Open */ 140 | 141 | header nav div.menu_icon .menu_open { 142 | position: absolute; 143 | width: 11px; 144 | height: 11px; 145 | background: currentColor; 146 | border-radius: 2px; 147 | transition: all 0.25s ease-in-out; 148 | } 149 | 150 | header nav div.menu_icon .menu_open.box_1 { 151 | top: 8px; 152 | left: 8px; 153 | } 154 | 155 | header nav div.menu_icon .menu_open.box_2 { 156 | top: 8px; 157 | right: 8px; 158 | } 159 | 160 | header nav div.menu_icon .menu_open.box_3 { 161 | bottom: 8px; 162 | left: 8px; 163 | } 164 | 165 | header nav div.menu_icon .menu_open.box_4 { 166 | bottom: 8px; 167 | right: 8px; 168 | } 169 | 170 | /* Icon Close */ 171 | 172 | header nav div.menu_icon .menu_close { 173 | position: absolute; 174 | width: 25px; 175 | height: 3px; 176 | background: currentColor; 177 | border-radius: 2px; 178 | transition: all 0.25s ease-in-out; 179 | } 180 | 181 | header nav div.menu_icon .menu_close.close_1 { 182 | transform: rotate(45deg) scaleX(0); 183 | } 184 | 185 | header nav div.menu_icon .menu_close.close_2 { 186 | transform: rotate(-45deg) scaleX(0); 187 | } 188 | 189 | /* Active State: Animation */ 190 | 191 | header nav div.menu_candy.menu_active .menu_open { 192 | top: 50%; 193 | left: 50%; 194 | transform: translate(-50%, -50%) scale(0); 195 | } 196 | 197 | header nav div.menu_candy.menu_active .menu_close.close_1 { 198 | transform: rotate(45deg) scaleX(1) rotate(180deg); 199 | } 200 | 201 | header nav div.menu_candy.menu_active .menu_close.close_2 { 202 | transform: rotate(-45deg) scaleX(1) rotate(180deg); 203 | } 204 | 205 | /* **************************** Header Menu Desktop **************************** */ 206 | 207 | header nav div.nav_items { 208 | margin: auto 0; 209 | display: flex; 210 | justify-content: center; 211 | align-items: center; 212 | } 213 | 214 | /* **************************** Header Menu Mobile **************************** */ 215 | 216 | @media (min-width: 768px) { 217 | header nav div.menu_icon { 218 | display: none; 219 | } 220 | } 221 | 222 | @media (max-width: 768px) { 223 | header nav div.nav_items { 224 | position: absolute; 225 | top: 0; 226 | left: 0; 227 | margin: 1rem 0; 228 | padding: 1rem; 229 | transform: translateY(20%); 230 | width: 100%; 231 | flex-direction: column; 232 | clip-path: inset(0 0 100% 0); 233 | transition: all 0.4s cubic-bezier(0.87, 0, 0.13, 1); 234 | 235 | /* Glass Effect */ 236 | border-radius: 10px; 237 | background: rgba(255, 255, 255, 0.1); 238 | box-shadow: inset 0px 0px 40px 20px rgba(255, 255, 255, 0.2); 239 | border: 2px solid rgba(255, 255, 255, 0.4); 240 | backdrop-filter: blur(20px); 241 | -webkit-backdrop-filter: blur(20px); 242 | } 243 | 244 | header nav div.menu_icon.menu_active ~ div.nav_items { 245 | clip-path: inset(0 0 0 0); 246 | } 247 | } 248 | 249 | /* **************************** Responsive Medias **************************** */ 250 | 251 | @media (max-width: 992px) { 252 | header nav div.nav_items a.nav_links { 253 | margin: auto 0.4rem; 254 | padding: 0.8rem 0.7rem 0.5rem; 255 | } 256 | } 257 | 258 | @media (max-width: 768px) { 259 | header nav div.nav_items a.nav_links { 260 | margin: 0.6rem auto; 261 | padding: 1.2rem 2.5rem 0.8rem; 262 | width: 100%; 263 | } 264 | } 265 | 266 | /* **************************** Styles End **************************** */ 267 | -------------------------------------------------------------------------------- /client/data/api.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All Api Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let apiData = [ 6 | { 7 | id: 1, 8 | lib_name: "OpenWeatherMap", 9 | lib_details: "Simple, fast, free and best API for weather forecast", 10 | lib_link: "https://openweathermap.org/", 11 | }, 12 | { 13 | id: 2, 14 | lib_name: "API FOOTBALL", 15 | lib_details: 16 | "Restful API for Football data with competitions, Livescore, teams, statistics, predictions etc.", 17 | lib_link: "https://www.api-football.com/", 18 | }, 19 | { 20 | id: 3, 21 | lib_name: "MessageBird", 22 | lib_details: 23 | "API for seamless SMS, Chat, Voice functionalities for websites and applications", 24 | lib_link: "https://developers.messagebird.com/", 25 | }, 26 | { 27 | id: 4, 28 | lib_name: "Newscatcher", 29 | lib_details: 30 | "News API that provides a real-time coverage feed to directly use the news data", 31 | lib_link: "https://newscatcherapi.com/", 32 | }, 33 | { 34 | id: 5, 35 | lib_name: "SendGrid", 36 | lib_details: 37 | "Cloud-based Web API that allows to send email without having to maintain email servers", 38 | lib_link: "https://sendgrid.com/", 39 | }, 40 | { 41 | id: 6, 42 | lib_name: "WordPress API", 43 | lib_details: 44 | "The WordPress REST API provides the posts, pages, taxonomies, and other built-in WordPress data types", 45 | lib_link: "https://sendgrid.com/", 46 | }, 47 | { 48 | id: 7, 49 | lib_name: "Domainr API", 50 | lib_details: 51 | "The Domainr API lets you retrieve instant domain search results and availability status", 52 | lib_link: "https://domainr.com/docs/api", 53 | }, 54 | { 55 | id: 8, 56 | lib_name: "WordsAPI", 57 | lib_details: 58 | "Retrieve information about English words, including definitions, synonyms, rhymes, pronunciation etc", 59 | lib_link: "https://www.wordsapi.com/", 60 | }, 61 | { 62 | id: 9, 63 | lib_name: "BoxDev", 64 | lib_details: "Allows developers to build applications that can run in the cloud", 65 | lib_link: "https://developer.box.com/", 66 | }, 67 | { 68 | id: 10, 69 | lib_name: "Stripe API", 70 | lib_details: "Payment API that provides payments, billing, invoicing etc. functionalities", 71 | lib_link: "https://stripe.com/in", 72 | }, 73 | { 74 | id: 11, 75 | lib_name: "paybook", 76 | lib_details: "Financial hub that provides API for Fintech developers", 77 | lib_link: "https://www.paybook.com/", 78 | }, 79 | { 80 | id: 12, 81 | lib_name: "Google Cloud Storage", 82 | lib_details: "Simple, JSON-backed API for accessing and manipulating Cloud Storage", 83 | lib_link: "https://cloud.google.com/storage/docs/json_api", 84 | }, 85 | { 86 | id: 13, 87 | lib_name: "Spotify API", 88 | lib_details: 89 | "Provides user-friendly music metadata and playlists for using in web and applications", 90 | lib_link: "https://developer.spotify.com/", 91 | }, 92 | { 93 | id: 14, 94 | lib_name: "Google Maps", 95 | lib_details: 96 | "Helps developers to take the power of Google Maps and put it directly on web and applications", 97 | lib_link: "https://developers.google.com/maps", 98 | }, 99 | { 100 | id: 15, 101 | lib_name: "IMDb API", 102 | lib_details: "Provides developers the database of information about movies and TV shows", 103 | lib_link: "https://imdb-api.com/", 104 | }, 105 | { 106 | id: 16, 107 | lib_name: "NASA API", 108 | lib_details: 109 | "The objective of these APIs is to make NASA data, including imagery, eminently accessible to application developers", 110 | lib_link: "https://api.nasa.gov/", 111 | }, 112 | { 113 | id: 17, 114 | lib_name: "Giphy API", 115 | lib_details: 116 | "GIPHY API helps you integrate the world's largest GIF library, boost engagement with just a few lines of code", 117 | lib_link: "https://developers.giphy.com/", 118 | }, 119 | { 120 | id: 18, 121 | lib_name: "Bitly API", 122 | lib_details: 123 | "By this API, you will exercise the full power of your links through automated link customization, click analytics", 124 | lib_link: "https://dev.bitly.com/", 125 | }, 126 | { 127 | id: 19, 128 | lib_name: "Sunrise Sunset", 129 | lib_details: 130 | "A free API that provides sunset and sunrise times for a given latitude and longitude", 131 | lib_link: "https://sunrise-sunset.org/api", 132 | }, 133 | { 134 | id: 20, 135 | lib_name: "SpaceX API", 136 | lib_details: 137 | "Open Source REST API for SpaceX launch, rocket, core, capsule, starlink, launchpad, and landing pad data", 138 | lib_link: "https://github.com/r-spacex/SpaceX-API", 139 | }, 140 | { 141 | id: 21, 142 | lib_name: "Google Fonts API", 143 | lib_details: 144 | "The Developer API gives access to the metadata for all families served by Google Fonts", 145 | lib_link: "https://developers.google.com/fonts/docs/developer_api", 146 | }, 147 | { 148 | id: 22, 149 | lib_name: "IBM Watson", 150 | lib_details: 151 | "Watson APIs make it easy to incorporate conversation, language and advanced text analytics into your applications", 152 | lib_link: "https://developer.ibm.com/components/watson-apis/", 153 | }, 154 | { 155 | id: 23, 156 | lib_name: "FullContact API", 157 | lib_details: 158 | "Privacy-safe Identity Resolution company building trust between people and brands", 159 | lib_link: "https://www.fullcontact.com/developer-portal/", 160 | }, 161 | { 162 | id: 24, 163 | lib_name: "Twitter API", 164 | lib_details: 165 | "Twitter API enables to tap into core elements of twitter like: Tweets, direct messages, spaces, users etc,", 166 | lib_link: "https://developer.twitter.com/en/docs", 167 | }, 168 | { 169 | id: 25, 170 | lib_name: "Facebook API", 171 | lib_details: 172 | "HTTP-based API that allows developers to extract data and functionality from the Facebook platform", 173 | lib_link: "https://developers.facebook.com/", 174 | }, 175 | { 176 | id: 26, 177 | lib_name: "Amazon S3 API", 178 | lib_details: 179 | "An HTTP/S REST API where all operations are via HTTP PUT, POST, GET, DELETE, and HEAD requests", 180 | lib_link: "https://docs.aws.amazon.com/AmazonS3/latest/API/Welcome.html", 181 | }, 182 | { 183 | id: 27, 184 | lib_name: "Dropbox", 185 | lib_details: 186 | "Allows developers to work with files in Dropbox, including advanced functionality like full-text search, thumbnails, and sharing", 187 | lib_link: "https://www.dropbox.com/developers/documentation/http/documentation", 188 | }, 189 | ]; 190 | 191 | /* ********************************************************** */ 192 | // All Api Libraries Preview Mapping 193 | /* ********************************************************** */ 194 | 195 | let apiLibrary = document.querySelector(".libraries"); 196 | 197 | Object.values(apiData).map((val) => { 198 | apiLibrary.innerHTML += ` 199 | 200 |
201 |

${val.lib_name}

202 |

${val.lib_details}

203 | 204 | See Now 205 | 206 |
207 | `; 208 | }); 209 | -------------------------------------------------------------------------------- /client/data/icon.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All Icons Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let iconData = [ 6 | { 7 | id: 1, 8 | lib_name: "Font Awesome", 9 | lib_details: 10 | "The web's most popular icon set & toolkit with vector icons & logos for your website.", 11 | lib_link: "https://fontawesome.com/", 12 | }, 13 | { 14 | id: 2, 15 | lib_name: "Boxicons", 16 | lib_details: 17 | "A simple vector icons crafted for designers & developers to use in your project.", 18 | lib_link: "https://boxicons.com/", 19 | }, 20 | { 21 | id: 3, 22 | lib_name: "Material Icons", 23 | lib_details: 24 | "A delightful, beautifully crafted symbols for common actions and items to use.", 25 | lib_link: "https://material.io/icons/", 26 | }, 27 | { 28 | id: 4, 29 | lib_name: "Flaticon", 30 | lib_details: 31 | "A largest database for wide variety of vector icons in SVG, PNG, EPS or Icon Font.", 32 | lib_link: "https://flaticon.com/", 33 | }, 34 | { 35 | id: 5, 36 | lib_name: "Tabler Icons", 37 | lib_details: 38 | "A set of over many free high-quality SVG icons with size & stroke customizable.", 39 | lib_link: "https://tablericons.com/", 40 | }, 41 | { 42 | id: 6, 43 | lib_name: "Shape", 44 | lib_details: "The collection of icons and illustrations with fully customizable options.", 45 | lib_link: "https://shape.so/", 46 | }, 47 | { 48 | id: 7, 49 | lib_name: "Lottie Icons", 50 | lib_details: 51 | "A set of animated lottie files icons that work like magic on your webflow site.", 52 | lib_link: "https://lottieflow.com/", 53 | }, 54 | { 55 | id: 8, 56 | lib_name: "Icons8", 57 | lib_details: 58 | "A variety icons, illustrations, photos, music, and design tools with icons8 toolkit.", 59 | lib_link: "https://icons8.com/", 60 | }, 61 | { 62 | id: 9, 63 | lib_name: "Nucleo", 64 | lib_details: 65 | "A cool icon organizer & library of icons, powerful app to customize & collect icons.", 66 | lib_link: "https://nucleoapp.com/", 67 | }, 68 | { 69 | id: 10, 70 | lib_name: "Streamline Icons", 71 | lib_details: 72 | "A collection of icon pack which work faster with our plugins for figma & sketch.", 73 | lib_link: "https://streamlineicons.com/", 74 | }, 75 | { 76 | id: 11, 77 | lib_name: "LineIcons", 78 | lib_details: 79 | "A handcrafted icons pack for modern UI of web, android, ios, desktop app projects.", 80 | lib_link: "https://lineicons.com/", 81 | }, 82 | { 83 | id: 12, 84 | lib_name: "Feather Icons", 85 | lib_details: 86 | "A simply beautiful open source icons pack with an emphasis on simplicity & flexibility.", 87 | lib_link: "https://feathericons.com/", 88 | }, 89 | { 90 | id: 13, 91 | lib_name: "Ionicons", 92 | lib_details: "A premium icons for web, ios, android, desktop apps with SVG & Web Font.", 93 | lib_link: "https://ionicons.com/", 94 | }, 95 | { 96 | id: 14, 97 | lib_name: "CSS Icons", 98 | lib_details: 99 | "A pure built-in CSS icons library, & format in pure CSS, SVG, Figma & Adobe XD.", 100 | lib_link: "https://css.gg/", 101 | }, 102 | { 103 | id: 15, 104 | lib_name: "Freeicons", 105 | lib_details: 106 | "The largest database of free icons available in PNG, SVG, EPS, PSD & BASE 64.", 107 | lib_link: "https://freeicons.io/", 108 | }, 109 | { 110 | id: 16, 111 | lib_name: "Iconpacks", 112 | lib_details: "Free PNG image, SVG vector icons for commercial and personal use.", 113 | lib_link: "https://www.iconpacks.net/", 114 | }, 115 | { 116 | id: 17, 117 | lib_name: "Iconfinder", 118 | lib_details: "Icons and Illustrations extensive, made easy. Make that icon perfect.", 119 | lib_link: "https://www.iconfinder.com/", 120 | }, 121 | { 122 | id: 18, 123 | lib_name: "Lordicon", 124 | lib_details: "Powerful animated icon library with every animated Lottie animations.", 125 | lib_link: "https://lordicon.com/", 126 | }, 127 | { 128 | id: 19, 129 | lib_name: "UX Wing", 130 | lib_details: "Well Optimized SVG & PNG icons for interface design of Web and App Dev.", 131 | lib_link: "https://uxwing.com/", 132 | }, 133 | { 134 | id: 20, 135 | lib_name: "Freepik", 136 | lib_details: "One of the most popular platforms for finding free vector icons online", 137 | lib_link: "https://www.freepik.com/", 138 | }, 139 | { 140 | id: 21, 141 | lib_name: "Iconninja", 142 | lib_details: "Provides icon materials with detailed information, in PNG and SVG", 143 | lib_link: "https://www.iconninja.com/", 144 | }, 145 | { 146 | id: 22, 147 | lib_name: "Vector4Free", 148 | lib_details: "Attractive icons and vector graphics personal use", 149 | lib_link: "https://www.vector4free.com/", 150 | }, 151 | { 152 | id: 23, 153 | lib_name: "The Noun Project", 154 | lib_details: "Cool bi-colored icons stock for almost everything", 155 | lib_link: "https://thenounproject.com/", 156 | }, 157 | { 158 | id: 24, 159 | lib_name: "Iconmonstr", 160 | lib_details: "Comprehensive icon library offers outlined and filled versions of each icon", 161 | lib_link: "https://iconmonstr.com/", 162 | }, 163 | { 164 | id: 25, 165 | lib_name: "Orion", 166 | lib_details: "Cool SVG vector icons of line, solid, color and flat styles", 167 | lib_link: "https://orioniconlibrary.com/", 168 | }, 169 | { 170 | id: 26, 171 | lib_name: "IcoMoon", 172 | lib_details: "Icon fonts and Icon packs, available on both website and app", 173 | lib_link: "https://icomoon.io/", 174 | }, 175 | { 176 | id: 27, 177 | lib_name: "Pictonic", 178 | lib_details: "Offers an array of icon fonts sorted according to theme", 179 | lib_link: "https://pictonic.co/", 180 | }, 181 | { 182 | id: 28, 183 | lib_name: "Glyphish", 184 | lib_details: "Features icons for iOS, Android and the Apple Watch", 185 | lib_link: "https://www.glyphish.com/", 186 | }, 187 | { 188 | id: 29, 189 | lib_name: "PixelLove", 190 | lib_details: "Six versatile icon styles for iOS and Android platforms", 191 | lib_link: "https://www.pixellove.com/", 192 | }, 193 | { 194 | id: 30, 195 | lib_name: "Smashicons", 196 | lib_details: "Very large collection of icons, don't all follow the same style", 197 | lib_link: "https://smashicons.com/", 198 | }, 199 | { 200 | id: 31, 201 | lib_name: "Roundicons", 202 | lib_details: "Commercial use icon library made for apps, websites, infographics and prints", 203 | lib_link: "https://roundicons.com/", 204 | }, 205 | { 206 | id: 32, 207 | lib_name: "React Icons", 208 | lib_details: 209 | "Icon compilation library to add icons from various libraries into React project as an SVG element", 210 | lib_link: "https://react-icons.github.io/react-icons/", 211 | }, 212 | ]; 213 | 214 | /* ********************************************************** */ 215 | // All Icons Libraries Preview Mapping 216 | /* ********************************************************** */ 217 | 218 | let iconLibrary = document.querySelector(".libraries"); 219 | 220 | Object.values(iconData).map((val) => { 221 | iconLibrary.innerHTML += ` 222 | 223 |
224 |

${val.lib_name}

225 |

${val.lib_details}

226 | 227 | See Now 228 | 229 |
230 | `; 231 | }); 232 | -------------------------------------------------------------------------------- /client/data/css.data.js: -------------------------------------------------------------------------------- 1 | /* ********************************************************** */ 2 | // All Css Libraries Data Object 3 | /* ********************************************************** */ 4 | 5 | let cssData = [ 6 | { 7 | id: 1, 8 | lib_name: "Bootstrap", 9 | lib_details: "A popular toolkit for quickly design responsive sites with Bootstrap.", 10 | lib_link: "https://getbootstrap.com/", 11 | }, 12 | { 13 | id: 2, 14 | lib_name: "Materialize", 15 | lib_details: "A modern responsive front-end framework based on Material Design.", 16 | lib_link: "https://materializecss.com/", 17 | }, 18 | { 19 | id: 3, 20 | lib_name: "Tailwind CSS", 21 | lib_details: "A utility-first CSS framework packed with classes to build any design.", 22 | lib_link: "https://tailwindcss.com/", 23 | }, 24 | { 25 | id: 4, 26 | lib_name: "UI Kit", 27 | lib_details: 28 | "A modular front-end framework for developing fast and powerful web interfaces.", 29 | lib_link: "https://getuikit.com/", 30 | }, 31 | { 32 | id: 5, 33 | lib_name: "Halfmoon CSS", 34 | lib_details: "A Front-end framework with a built-in dark mode great for build site panels.", 35 | lib_link: "https://www.gethalfmoon.com/", 36 | }, 37 | { 38 | id: 6, 39 | lib_name: "Primer", 40 | lib_details: "Design, build, and create with GitHub’s design system.", 41 | lib_link: "https://primer.style/", 42 | }, 43 | { 44 | id: 7, 45 | lib_name: "AOS", 46 | lib_details: "A toolkit for animate on scrolling around your website with AOS Library.", 47 | lib_link: "https://michalsnik.github.io/aos/", 48 | }, 49 | { 50 | id: 8, 51 | lib_name: "Swiper", 52 | lib_details: 53 | "The most modern mobile & web touch slider with amazing transitions & flexible.", 54 | lib_link: "https://swiperjs.com/", 55 | }, 56 | { 57 | id: 9, 58 | lib_name: "Animate.css", 59 | lib_details: 60 | "A library of ready-to-use, cross-browser CSS animations for your web projects.", 61 | lib_link: "https://animate.style/", 62 | }, 63 | { 64 | id: 10, 65 | lib_name: "AnimXYZ", 66 | lib_details: "A limitless unique & complex animations with first CSS animation toolkit.", 67 | lib_link: "https://animxyz.com/", 68 | }, 69 | { 70 | id: 11, 71 | lib_name: "Tasty Hamburgers", 72 | lib_details: "Hamburgers is a collection of tasty CSS-animated hamburger icons & editable.", 73 | lib_link: "https://jonsuh.com/hamburgers/", 74 | }, 75 | { 76 | id: 12, 77 | lib_name: "Highlight JS", 78 | lib_details: 79 | "Highlight.js is a code/syntax highlighter for web & have wide range of languages.", 80 | lib_link: "https://highlightjs.org/", 81 | }, 82 | { 83 | id: 13, 84 | lib_name: "Slick", 85 | lib_details: 86 | "A simple responsive carousel library with multiple breakpoints for your site.", 87 | lib_link: "https://kenwheeler.github.io/slick/", 88 | }, 89 | { 90 | id: 14, 91 | lib_name: "Pattern.css", 92 | lib_details: "A CSS only library to fill your empty background with beautiful patterns.", 93 | lib_link: "https://bansal.io/pattern-css", 94 | }, 95 | { 96 | id: 15, 97 | lib_name: "Morphext", 98 | lib_details: 99 | "'Morphing + Text = Morphext', simplest text rotator powered by jQuery and Animate.css", 100 | lib_link: "https://morphext.fyianlai.com/", 101 | }, 102 | { 103 | id: 16, 104 | lib_name: "CSShake", 105 | lib_details: "Some CSS classes to move your DOM!", 106 | lib_link: "https://elrumordelaluz.github.io/csshake/", 107 | }, 108 | { 109 | id: 17, 110 | lib_name: "Animista", 111 | lib_details: "Animista - CSS Animations on Demand", 112 | lib_link: "https://animista.net/", 113 | }, 114 | { 115 | id: 18, 116 | lib_name: "Magic Effects", 117 | lib_details: "Magic Effects Animation for CSS", 118 | lib_link: "https://www.minimamente.com/project/magic/", 119 | }, 120 | { 121 | id: 19, 122 | lib_name: "Foundation", 123 | lib_details: "Free, Open source, responsive front-end framework", 124 | lib_link: "https://get.foundation/", 125 | }, 126 | { 127 | id: 20, 128 | lib_name: "Bulma", 129 | lib_details: "Free, open source CSS framework based on Flexbox and built with Sass", 130 | lib_link: "https://bulma.io/", 131 | }, 132 | { 133 | id: 21, 134 | lib_name: "Semantic UI", 135 | lib_details: "Helps to create beautiful, responsive layouts with themes", 136 | lib_link: "https://semantic-ui.com/", 137 | }, 138 | { 139 | id: 22, 140 | lib_name: "Susy", 141 | lib_details: "Responsive layout engine for Sass, with grid, flexbox etc", 142 | lib_link: "https://www.oddbird.net/susy/", 143 | }, 144 | { 145 | id: 23, 146 | lib_name: "Pure CSS", 147 | lib_details: "A set of small, responsive CSS modules that you can use in web projects.", 148 | lib_link: "https://purecss.io/", 149 | }, 150 | { 151 | id: 24, 152 | lib_name: "Skeleton", 153 | lib_details: "Simple, lightweight and responsive CSS framework (boilerplate)", 154 | lib_link: "http://getskeleton.com/", 155 | }, 156 | { 157 | id: 25, 158 | lib_name: "Milligram", 159 | lib_details: "Minimal setup of CSS framework designed for speed and productivity", 160 | lib_link: "https://milligram.io/", 161 | }, 162 | { 163 | id: 26, 164 | lib_name: "Tacit", 165 | lib_details: "Provides web design for those who don’t know CSS or have bad taste in design", 166 | lib_link: "https://yegor256.github.io/tacit/", 167 | }, 168 | { 169 | id: 27, 170 | lib_name: "Spectre", 171 | lib_details: "Lightweight, responsive and modern CSS framework", 172 | lib_link: "https://picturepan2.github.io/spectre/", 173 | }, 174 | { 175 | id: 28, 176 | lib_name: "CSS Wand", 177 | lib_details: "Coutomizable beautiful CSS for Loading and Hover effects", 178 | lib_link: "https://www.csswand.dev/", 179 | }, 180 | { 181 | id: 29, 182 | lib_name: "Water.css", 183 | lib_details: "Drop-in collection of CSS styles to make simple websites attractive", 184 | lib_link: "https://www.csswand.dev/", 185 | }, 186 | { 187 | id: 30, 188 | lib_name: "Ionic", 189 | lib_details: "Features a full array of CSS utilities and components", 190 | lib_link: "https://ionicframework.com/", 191 | }, 192 | { 193 | id: 31, 194 | lib_name: "Voxel.css", 195 | lib_details: "CSS library for 3D elements rendering", 196 | lib_link: "http://voxelcss.com/", 197 | }, 198 | { 199 | id: 32, 200 | lib_name: "Fix Carousel", 201 | lib_details: "Pure-CSS animated carousel modeled after Netflix's browse screeng", 202 | lib_link: "https://github.com/anthonykrivonos/flix-carousel", 203 | }, 204 | { 205 | id: 33, 206 | lib_name: "Woah.css", 207 | lib_details: "CSS Animation Library for eccentric web developers", 208 | lib_link: "https://github.com/joerez/Woah.css", 209 | }, 210 | { 211 | id: 34, 212 | lib_name: "Denali", 213 | lib_details: "Theamable design system with unique visual style", 214 | lib_link: "https://denali.design/", 215 | }, 216 | { 217 | id: 35, 218 | lib_name: "RealxCSS", 219 | lib_details: "Minimal styles of components for web or app designs", 220 | lib_link: "https://ziyadsk.github.io/relaxCSS/", 221 | }, 222 | { 223 | id: 36, 224 | lib_name: "Tachyons", 225 | lib_details: "Creates fast loading and responsive interfaces with minimal CSS", 226 | lib_link: "https://tachyons.io/", 227 | }, 228 | ]; 229 | 230 | /* ********************************************************** */ 231 | // All Css Libraries Preview Mapping 232 | /* ********************************************************** */ 233 | 234 | let cssLibrary = document.querySelector(".libraries"); 235 | 236 | Object.values(cssData).map((val) => { 237 | cssLibrary.innerHTML += ` 238 | 239 |
240 |

${val.lib_name}

241 |

${val.lib_details}

242 | 243 | See Now 244 | 245 |
246 | `; 247 | }); 248 | -------------------------------------------------------------------------------- /client/img/lang/icon5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/img/lang/icon4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/js/libraries/clipboard.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * clipboard.js v2.0.8 3 | * https://clipboardjs.com/ 4 | * 5 | * Licensed MIT © Zeno Rocha 6 | */ 7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return o}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),c=n.n(e);function a(t){try{return document.execCommand(t)}catch(t){return}}var f=function(t){t=c()(t);return a("cut"),t};var l=function(t){var e,n,o,r=1n;n++)e[n][t]()},t.destroyAll=function(){t.invokeAll("destroy")},t.disableAll=function(){t.invokeAll("disable")},t.enableAll=function(){t.Context.refreshAll();for(var e in i)i[e].enabled=!0;return this},t.refreshAll=function(){t.Context.refreshAll()},t.viewportHeight=function(){return window.innerHeight||document.documentElement.clientHeight},t.viewportWidth=function(){return document.documentElement.clientWidth},t.adapters=[],t.defaults={context:window,continuous:!0,enabled:!0,group:"default",horizontal:!1,offset:0},t.offsetAliases={"bottom-in-view":function(){return this.context.innerHeight()-this.adapter.outerHeight()},"right-in-view":function(){return this.context.innerWidth()-this.adapter.outerWidth()}},window.Waypoint=t}(),function(){"use strict";function t(t){window.setTimeout(t,1e3/60)}function e(t){this.element=t,this.Adapter=n.Adapter,this.adapter=new this.Adapter(t),this.key="waypoint-context-"+i,this.didScroll=!1,this.didResize=!1,this.oldScroll={x:this.adapter.scrollLeft(),y:this.adapter.scrollTop()},this.waypoints={vertical:{},horizontal:{}},t.waypointContextKey=this.key,o[t.waypointContextKey]=this,i+=1,n.windowContext||(n.windowContext=!0,n.windowContext=new e(window)),this.createThrottledScrollHandler(),this.createThrottledResizeHandler()}var i=0,o={},n=window.Waypoint,r=window.onload;e.prototype.add=function(t){var e=t.options.horizontal?"horizontal":"vertical";this.waypoints[e][t.key]=t,this.refresh()},e.prototype.checkEmpty=function(){var t=this.Adapter.isEmptyObject(this.waypoints.horizontal),e=this.Adapter.isEmptyObject(this.waypoints.vertical),i=this.element==this.element.window;t&&e&&!i&&(this.adapter.off(".waypoints"),delete o[this.key])},e.prototype.createThrottledResizeHandler=function(){function t(){e.handleResize(),e.didResize=!1}var e=this;this.adapter.on("resize.waypoints",function(){e.didResize||(e.didResize=!0,n.requestAnimationFrame(t))})},e.prototype.createThrottledScrollHandler=function(){function t(){e.handleScroll(),e.didScroll=!1}var e=this;this.adapter.on("scroll.waypoints",function(){(!e.didScroll||n.isTouch)&&(e.didScroll=!0,n.requestAnimationFrame(t))})},e.prototype.handleResize=function(){n.Context.refreshAll()},e.prototype.handleScroll=function(){var t={},e={horizontal:{newScroll:this.adapter.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.adapter.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};for(var i in e){var o=e[i],n=o.newScroll>o.oldScroll,r=n?o.forward:o.backward;for(var s in this.waypoints[i]){var a=this.waypoints[i][s];if(null!==a.triggerPoint){var l=o.oldScroll=a.triggerPoint,p=l&&h,u=!l&&!h;(p||u)&&(a.queueTrigger(r),t[a.group.id]=a.group)}}}for(var c in t)t[c].flushTriggers();this.oldScroll={x:e.horizontal.newScroll,y:e.vertical.newScroll}},e.prototype.innerHeight=function(){return this.element==this.element.window?n.viewportHeight():this.adapter.innerHeight()},e.prototype.remove=function(t){delete this.waypoints[t.axis][t.key],this.checkEmpty()},e.prototype.innerWidth=function(){return this.element==this.element.window?n.viewportWidth():this.adapter.innerWidth()},e.prototype.destroy=function(){var t=[];for(var e in this.waypoints)for(var i in this.waypoints[e])t.push(this.waypoints[e][i]);for(var o=0,n=t.length;n>o;o++)t[o].destroy()},e.prototype.refresh=function(){var t,e=this.element==this.element.window,i=e?void 0:this.adapter.offset(),o={};this.handleScroll(),t={horizontal:{contextOffset:e?0:i.left,contextScroll:e?0:this.oldScroll.x,contextDimension:this.innerWidth(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:e?0:i.top,contextScroll:e?0:this.oldScroll.y,contextDimension:this.innerHeight(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};for(var r in t){var s=t[r];for(var a in this.waypoints[r]){var l,h,p,u,c,d=this.waypoints[r][a],f=d.options.offset,w=d.triggerPoint,y=0,g=null==w;d.element!==d.element.window&&(y=d.adapter.offset()[s.offsetProp]),"function"==typeof f?f=f.apply(d):"string"==typeof f&&(f=parseFloat(f),d.options.offset.indexOf("%")>-1&&(f=Math.ceil(s.contextDimension*f/100))),l=s.contextScroll-s.contextOffset,d.triggerPoint=Math.floor(y+l-f),h=w=s.oldScroll,u=h&&p,c=!h&&!p,!g&&u?(d.queueTrigger(s.backward),o[d.group.id]=d.group):!g&&c?(d.queueTrigger(s.forward),o[d.group.id]=d.group):g&&s.oldScroll>=d.triggerPoint&&(d.queueTrigger(s.forward),o[d.group.id]=d.group)}}return n.requestAnimationFrame(function(){for(var t in o)o[t].flushTriggers()}),this},e.findOrCreateByElement=function(t){return e.findByElement(t)||new e(t)},e.refreshAll=function(){for(var t in o)o[t].refresh()},e.findByElement=function(t){return o[t.waypointContextKey]},window.onload=function(){r&&r(),e.refreshAll()},n.requestAnimationFrame=function(e){var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||t;i.call(window,e)},n.Context=e}(),function(){"use strict";function t(t,e){return t.triggerPoint-e.triggerPoint}function e(t,e){return e.triggerPoint-t.triggerPoint}function i(t){this.name=t.name,this.axis=t.axis,this.id=this.name+"-"+this.axis,this.waypoints=[],this.clearTriggerQueues(),o[this.axis][this.name]=this}var o={vertical:{},horizontal:{}},n=window.Waypoint;i.prototype.add=function(t){this.waypoints.push(t)},i.prototype.clearTriggerQueues=function(){this.triggerQueues={up:[],down:[],left:[],right:[]}},i.prototype.flushTriggers=function(){for(var i in this.triggerQueues){var o=this.triggerQueues[i],n="up"===i||"left"===i;o.sort(n?e:t);for(var r=0,s=o.length;s>r;r+=1){var a=o[r];(a.options.continuous||r===o.length-1)&&a.trigger([i])}}this.clearTriggerQueues()},i.prototype.next=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints),o=i===this.waypoints.length-1;return o?null:this.waypoints[i+1]},i.prototype.previous=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints);return i?this.waypoints[i-1]:null},i.prototype.queueTrigger=function(t,e){this.triggerQueues[e].push(t)},i.prototype.remove=function(t){var e=n.Adapter.inArray(t,this.waypoints);e>-1&&this.waypoints.splice(e,1)},i.prototype.first=function(){return this.waypoints[0]},i.prototype.last=function(){return this.waypoints[this.waypoints.length-1]},i.findOrCreate=function(t){return o[t.axis][t.name]||new i(t)},n.Group=i}(),function(){"use strict";function t(t){this.$element=e(t)}var e=window.jQuery,i=window.Waypoint;e.each(["innerHeight","innerWidth","off","offset","on","outerHeight","outerWidth","scrollLeft","scrollTop"],function(e,i){t.prototype[i]=function(){var t=Array.prototype.slice.call(arguments);return this.$element[i].apply(this.$element,t)}}),e.each(["extend","inArray","isEmptyObject"],function(i,o){t[o]=e[o]}),i.adapters.push({name:"jquery",Adapter:t}),i.Adapter=t}(),function(){"use strict";function t(t){return function(){var i=[],o=arguments[0];return t.isFunction(arguments[0])&&(o=t.extend({},arguments[1]),o.handler=arguments[0]),this.each(function(){var n=t.extend({},o,{element:this});"string"==typeof n.context&&(n.context=t(this).closest(n.context)[0]),i.push(new e(n))}),i}}var e=window.Waypoint;window.jQuery&&(window.jQuery.fn.waypoint=t(window.jQuery)),window.Zepto&&(window.Zepto.fn.waypoint=t(window.Zepto))}(); -------------------------------------------------------------------------------- /client/img/lang/icon8.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/img/lang/icon3.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------