├── pages ├── api │ ├── youtube.js │ └── instagram.js ├── Share │ └── index.jsx ├── google │ ├── YouTube │ │ └── downloader │ │ │ └── index.jsx │ ├── [path].jsx │ └── drive-link-gen.jsx ├── _app.jsx ├── _document.jsx ├── index.jsx └── instagram │ └── [path].jsx ├── .gitignore ├── netlify.toml ├── next-env.d.ts ├── .github └── FUNDING.yml ├── public ├── images │ ├── 006bd8c9-3a18-dd17-4575-7c2a52480a98.webPlatform.png │ ├── 01aaad95-96c6-beaa-6416-9a2237a736dd.webPlatform.png │ ├── 14fbfb3f-832a-915f-f7b2-37aa89a36518.webPlatform.png │ ├── 27333677-42a7-9819-7c22-f3e5d8c5d8a8.webPlatform.png │ ├── 2c8c5d1f-446d-1041-fe00-c0b993d224bb.webPlatform.png │ ├── 4307672d-10bc-dcd6-de42-ca62409a458e.webPlatform.png │ ├── 4b791c82-a374-1250-d09e-3586f5a0298c.webPlatform.png │ ├── 64c70b39-ed95-cb0e-3313-7aeb8eff69a7.webPlatform.png │ ├── 6a59e343-94f9-f883-c005-7eda77f725da.webPlatform.png │ ├── 8ce70cb4-bce0-5d13-c2a8-ab0b03b557d7.webPlatform.png │ ├── 8d02342f-8b4c-5e7b-0b41-12e0cd32688c.webPlatform.png │ ├── 95d7c2fc-de3a-a8b8-7b02-5e5c7e12b518.webPlatform.png │ ├── a9adb666-d106-b152-7e20-1fc5bd863806.webPlatform.png │ ├── c3290bc6-cc20-2ecc-8e98-a678907001b4.webPlatform.png │ ├── c9a3ec0e-7c64-541c-bbc0-261e901fc1e8.webPlatform.png │ └── d03b4654-de0f-89bb-1db8-6cff85fec44d.webPlatform.png └── manifest.json ├── components ├── imageSlider │ ├── imageSlider.module.css │ ├── imageComponent │ │ ├── imageComponent.module.css │ │ └── index.jsx │ └── index.jsx ├── videoPlayer │ ├── videoPlayer.module.css │ ├── index.jsx │ └── videoComponent │ │ ├── index.jsx │ │ └── videoComponent.module.css ├── Header │ ├── _darkmode_toggle │ │ ├── darkmodeToggle.module.css │ │ └── darkmodeToggle.jsx │ ├── header.module.css │ └── header.jsx ├── LoadingIcon │ ├── index.jsx │ └── loading.module.css ├── toolsPage-componets │ ├── Header │ │ ├── index.jsx │ │ └── heroSection │ │ │ ├── index.jsx │ │ │ └── heroSection.module.css │ ├── copyTextBox │ │ └── index.jsx │ └── textInput │ │ ├── textinput.module.css │ │ └── index.jsx ├── Footer │ ├── index.jsx │ └── footer.module.css ├── card │ ├── index.jsx │ └── card.module.css └── categories │ ├── index.jsx │ └── category.module.css ├── utils ├── instagram.js └── ga.js ├── configs ├── categories.config.js ├── instagramData.test.config.js └── cards.config.js ├── package.json ├── README.md ├── styles └── styles.css └── yarn.lock /pages/api/youtube.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | rename.js 3 | dist 4 | .next -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "out" -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | ko_fi: piyush 4 | 5 | -------------------------------------------------------------------------------- /public/images/006bd8c9-3a18-dd17-4575-7c2a52480a98.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/006bd8c9-3a18-dd17-4575-7c2a52480a98.webPlatform.png -------------------------------------------------------------------------------- /public/images/01aaad95-96c6-beaa-6416-9a2237a736dd.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/01aaad95-96c6-beaa-6416-9a2237a736dd.webPlatform.png -------------------------------------------------------------------------------- /public/images/14fbfb3f-832a-915f-f7b2-37aa89a36518.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/14fbfb3f-832a-915f-f7b2-37aa89a36518.webPlatform.png -------------------------------------------------------------------------------- /public/images/27333677-42a7-9819-7c22-f3e5d8c5d8a8.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/27333677-42a7-9819-7c22-f3e5d8c5d8a8.webPlatform.png -------------------------------------------------------------------------------- /public/images/2c8c5d1f-446d-1041-fe00-c0b993d224bb.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/2c8c5d1f-446d-1041-fe00-c0b993d224bb.webPlatform.png -------------------------------------------------------------------------------- /public/images/4307672d-10bc-dcd6-de42-ca62409a458e.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/4307672d-10bc-dcd6-de42-ca62409a458e.webPlatform.png -------------------------------------------------------------------------------- /public/images/4b791c82-a374-1250-d09e-3586f5a0298c.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/4b791c82-a374-1250-d09e-3586f5a0298c.webPlatform.png -------------------------------------------------------------------------------- /public/images/64c70b39-ed95-cb0e-3313-7aeb8eff69a7.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/64c70b39-ed95-cb0e-3313-7aeb8eff69a7.webPlatform.png -------------------------------------------------------------------------------- /public/images/6a59e343-94f9-f883-c005-7eda77f725da.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/6a59e343-94f9-f883-c005-7eda77f725da.webPlatform.png -------------------------------------------------------------------------------- /public/images/8ce70cb4-bce0-5d13-c2a8-ab0b03b557d7.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/8ce70cb4-bce0-5d13-c2a8-ab0b03b557d7.webPlatform.png -------------------------------------------------------------------------------- /public/images/8d02342f-8b4c-5e7b-0b41-12e0cd32688c.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/8d02342f-8b4c-5e7b-0b41-12e0cd32688c.webPlatform.png -------------------------------------------------------------------------------- /public/images/95d7c2fc-de3a-a8b8-7b02-5e5c7e12b518.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/95d7c2fc-de3a-a8b8-7b02-5e5c7e12b518.webPlatform.png -------------------------------------------------------------------------------- /public/images/a9adb666-d106-b152-7e20-1fc5bd863806.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/a9adb666-d106-b152-7e20-1fc5bd863806.webPlatform.png -------------------------------------------------------------------------------- /public/images/c3290bc6-cc20-2ecc-8e98-a678907001b4.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/c3290bc6-cc20-2ecc-8e98-a678907001b4.webPlatform.png -------------------------------------------------------------------------------- /public/images/c9a3ec0e-7c64-541c-bbc0-261e901fc1e8.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/c9a3ec0e-7c64-541c-bbc0-261e901fc1e8.webPlatform.png -------------------------------------------------------------------------------- /public/images/d03b4654-de0f-89bb-1db8-6cff85fec44d.webPlatform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyushSuthar/toolzar/HEAD/public/images/d03b4654-de0f-89bb-1db8-6cff85fec44d.webPlatform.png -------------------------------------------------------------------------------- /components/imageSlider/imageSlider.module.css: -------------------------------------------------------------------------------- 1 | .image_slider { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | margin-top: 10px; 6 | justify-content: space-evenly; 7 | } 8 | -------------------------------------------------------------------------------- /components/videoPlayer/videoPlayer.module.css: -------------------------------------------------------------------------------- 1 | .videoPlayer { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: row; 5 | flex-wrap: wrap; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | -------------------------------------------------------------------------------- /utils/instagram.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {string}url 3 | * @returns {Promise} 4 | */ 5 | export const getInstagramData = async (url) => { 6 | const data = await fetch(`/api/instagram?url=${url}`).then(res => res.json()) 7 | return data 8 | } -------------------------------------------------------------------------------- /components/Header/_darkmode_toggle/darkmodeToggle.module.css: -------------------------------------------------------------------------------- 1 | .darkmode_toggle { 2 | animation: onLoad 0.4s; 3 | } 4 | @keyframes onLoad { 5 | from { 6 | transform: scale(0.5); 7 | } 8 | 50% { 9 | transform: scale(1.02); 10 | } 11 | to { 12 | transform: scale(1); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /components/LoadingIcon/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./loading.module.css"; 3 | 4 | export default function LoadingIcon() { 5 | return ( 6 |
7 |
8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /configs/categories.config.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | title: "All", 4 | image: "https://source.unsplash.com/random" 5 | }, 6 | { 7 | title: "Instagram", 8 | image: "https://source.unsplash.com/200x200/?instagram" 9 | }, 10 | { 11 | title: "Google", 12 | image: "https://source.unsplash.com/200x200/?google" 13 | } 14 | ]; 15 | -------------------------------------------------------------------------------- /utils/ga.js: -------------------------------------------------------------------------------- 1 | export const GA_TRACKING_CODE = "UA-164785769-4" 2 | 3 | // log the pageview with their URL 4 | export const pageview = (url) => { 5 | window.gtag('config', GA_TRACKING_CODE, { 6 | page_path: url, 7 | }) 8 | } 9 | 10 | // log specific events happening. 11 | export const event = ({ action, params }) => { 12 | window.gtag('event', action, params) 13 | } -------------------------------------------------------------------------------- /configs/instagramData.test.config.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | image: "https://source.unsplash.com/1600x900/?instagram" 4 | }, 5 | { 6 | image: "https://source.unsplash.com/1600x900/?instagram" 7 | }, 8 | { 9 | image: "https://source.unsplash.com/1600x900/?instagram" 10 | }, 11 | { 12 | image: "https://source.unsplash.com/1600x900/?instagram" 13 | } 14 | ]; 15 | -------------------------------------------------------------------------------- /components/toolsPage-componets/Header/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "../../Header/header"; 3 | import HeroSection from "./heroSection"; 4 | 5 | export default function toolsPageHeader({ title, subtitle, image }) { 6 | return ( 7 | <> 8 |
9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /components/toolsPage-componets/Header/heroSection/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./heroSection.module.css"; 3 | 4 | export default function HeroSection({ title, subtitle, image }) { 5 | return ( 6 |
12 |

{title}

13 |

{subtitle}

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /components/LoadingIcon/loading.module.css: -------------------------------------------------------------------------------- 1 | .loading_icon_outer { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | width: 100%; 6 | } 7 | .loading_out { 8 | background-color: var(--loaderIcon); 9 | height: 25px; 10 | width: 25px; 11 | border-radius: 50%; 12 | animation: loadingOut 1s ease infinite; 13 | } 14 | 15 | @keyframes loadingOut { 16 | from { 17 | /* height: 0; 18 | width: 0; */ 19 | transform: scale(1); 20 | opacity: 0.3; 21 | } 22 | 60% { 23 | /* height: 25px; 24 | width: 25px; */ 25 | transform: scale(0); 26 | opacity: 0.8; 27 | } 28 | to { 29 | /* height: 0; 30 | width: 0; */ 31 | transform: scale(1); 32 | opacity: 0.3; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": [ 6 | "react", 7 | "starter" 8 | ], 9 | "main": "src/index.js", 10 | "dependencies": { 11 | "igcraper": "^0.0.1", 12 | "next": "^11.1.3", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-feather": "2.0.8" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "15.12.2", 19 | "@types/react": "17.0.11", 20 | "@types/react-dom": "17.0.7", 21 | "typescript": "4.3.2" 22 | }, 23 | "scripts": { 24 | "dev": "next", 25 | "build": "next build", 26 | "start": "next start", 27 | "type-check": "tsc", 28 | "export": "next export" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /components/Footer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./footer.module.css"; 3 | import { GitHub } from "react-feather"; 4 | 5 | export default function Footer() { 6 | return ( 7 | <> 8 |
9 |
10 |

Made With ❤ By Piyush Suthar

11 |
OPEN SOURCE
12 |
13 |
14 | 19 | 20 | 21 |
22 |
23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/imageSlider/imageComponent/imageComponent.module.css: -------------------------------------------------------------------------------- 1 | .image_container { 2 | display: flex; 3 | flex-direction: column; 4 | margin: 10px 10px; 5 | animation: loaded 0.3s ease; 6 | } 7 | .image_container img { 8 | width: 100%; 9 | height: auto; 10 | box-shadow: var(--CategoryBoxsShadow); 11 | border-radius: 20px; 12 | max-width: 400px; 13 | } 14 | .image_download { 15 | background-color: var(--cardBackground); 16 | border-radius: 50%; 17 | color: var(--SubtextColor); 18 | padding: 10px; 19 | box-shadow: var(--CategoryBoxsShadow); 20 | margin-top: -60px; 21 | } 22 | @keyframes loaded { 23 | from { 24 | transform: translateY(-5px); 25 | } 26 | 50% { 27 | transform: translateY(2px); 28 | } 29 | to { 30 | transform: translateY(0px); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/Header/header.module.css: -------------------------------------------------------------------------------- 1 | .header_home_conatainer { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | align-items: center; 6 | animation: onLoadAnimate 0.3s ease; 7 | } 8 | .header_home_title p { 9 | color: var(--SubtextColor); 10 | font-size: 17px; 11 | font-weight: 500; 12 | margin-top: 0px; 13 | } 14 | .header_home_title h1 { 15 | color: var(--mainTextColor); 16 | font-size: 38px; 17 | margin-bottom: 0px; 18 | font-weight: 600; 19 | } 20 | 21 | .header_backarrow { 22 | color: var(--BackArrowColor); 23 | animation: onLoadAnimate 0.3s ease; 24 | } 25 | 26 | @keyframes onLoadAnimate { 27 | from { 28 | transform: translateY(-5px); 29 | } 30 | 50% { 31 | transform: translateY(2px); 32 | } 33 | to { 34 | transform: translateY(0px); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/card/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Link from "next/link"; 3 | import styles from "./card.module.css"; 4 | 5 | export default function Cards({ data, type }) { 6 | return ( 7 |
8 |

{type}

9 |
10 | {data.map((value, index) => ( 11 | 12 | ))} 13 |
14 |
15 | ); 16 | } 17 | function Card({ data, index }) { 18 | return ( 19 | 20 | 21 |
22 |

{data.category}

23 |

{data.Name}

24 |
25 |
26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/imageSlider/imageComponent/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import styles from "./imageComponent.module.css"; 3 | import { Download } from "react-feather"; 4 | import LoadingIcon from "../../LoadingIcon"; 5 | 6 | export default function Image({ url }) { 7 | // const [loading, setLoading] = useState(false); 8 | 9 | // if (loading === true) { 10 | // return ; 11 | // } else { 12 | return ( 13 |
14 | Instagram 20 | 21 | 22 | 23 |
24 | ); 25 | // } 26 | } 27 | -------------------------------------------------------------------------------- /components/videoPlayer/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import VideoComponent from "./videoComponent"; 3 | import styles from "./videoPlayer.module.css"; 4 | import ImageComponent from "../imageSlider/imageComponent"; 5 | 6 | export default function VideoPlayer({ data, isloading }) { 7 | const [IGData, setIGdata] = useState(""); 8 | 9 | useEffect(() => { 10 | setIGdata(data); 11 | return () => setIGdata(""); 12 | }, [data]); 13 | 14 | if (isloading) { 15 | return ""; 16 | } else { 17 | return ( 18 |
19 | {IGData.map((value, index) => { 20 | return value.isVideo ? ( 21 | 22 | ) : ( 23 | 24 | ); 25 | })} 26 |
27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /components/categories/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./category.module.css"; 3 | 4 | export default function Categories({ data, setcategory }) { 5 | return ( 6 |
7 | {data.map(({ title, image }, index) => ( 8 | 14 | ))} 15 |
16 | ); 17 | } 18 | 19 | function Category({ title, image, setcategory }) { 20 | return ( 21 |
{ 27 | setcategory(title); 28 | }} 29 | className={styles.category_main} 30 | > 31 |

{title}

32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /pages/Share/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import Header from "../../components/Header/header"; 3 | 4 | export default function Share() { 5 | useEffect(() => { 6 | const parsedUrl = new URL(window.location); 7 | const url = parsedUrl.searchParams.get("url"); 8 | if (url) { 9 | if (url.includes("instagram")) { 10 | window.location.href = `https://${parsedUrl.hostname}/instagram/video?url=${url}`; 11 | } else if (url.includes("drive.google.com")) { 12 | window.location.href = `https://${parsedUrl.hostname}/google/drive-link-gen?url=${url}`; 13 | } else { 14 | window.location.href = `https://${parsedUrl.hostname}/`; 15 | } 16 | } else { 17 | window.location.href = `https://${parsedUrl.hostname}/`; 18 | } 19 | }); 20 | return ( 21 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /components/videoPlayer/videoComponent/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./videoComponent.module.css"; 3 | import { Download } from "react-feather"; 4 | // import LoadingIcon from "../../LoadingIcon"; 5 | 6 | export default function VideoComponent({ src }) { 7 | return ( 8 |
9 | {/* {loaded === false ? ( 10 |
11 | 12 |

Loading

13 |
14 | ) : ( */} 15 | 16 | 17 |

Download

18 |
19 | {/* )} */} 20 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /components/imageSlider/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ImageComponent from "./imageComponent"; 3 | import styles from "./imageSlider.module.css"; 4 | 5 | export default function ImageSlider({ isSingle, data, load }) { 6 | const [Igdata, SetIgData] = useState(""); 7 | useEffect(() => { 8 | SetIgData(data); 9 | }, [data]); 10 | if (load === true) { 11 | return ( 12 |
13 | {isSingle ? ( 14 | 15 | ) : ( 16 | Igdata.map((data, index) => ( 17 | 26 | )) 27 | )} 28 |
29 | ); 30 | } else { 31 | return ""; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/google/YouTube/downloader/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Header from "../../../../components/toolsPage-componets/Header"; 3 | import TextInput from "../../../../components/toolsPage-componets/textInput"; 4 | 5 | export default function YoutubeDownloader({ type }) { 6 | const [url, setUrl] = useState(""); 7 | useEffect(() => { 8 | if (url.includes("youtube.com")) { 9 | DownLoad(); 10 | } else if (url.includes("youtu.be")) { 11 | DownLoad(); 12 | } else { 13 | return; 14 | } 15 | function DownLoad() { 16 | var api = `https://covid-img.azurewebsites.net/${ 17 | type === "Mp3" ? "mp3" : "mp4" 18 | }?url=`; 19 | window.open(`${api}${url}`); 20 | } 21 | }, [url, type]); 22 | return ( 23 | <> 24 |
29 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /components/categories/category.module.css: -------------------------------------------------------------------------------- 1 | .category_container { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: center; 5 | margin-top: 20px; 6 | } 7 | .category_main:first-child { 8 | margin-left: 0; 9 | } 10 | .category_main { 11 | min-height: 20px; 12 | width: 150px; 13 | background-repeat: no-repeat; 14 | background-size: cover; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | color: white; 19 | padding: 15px; 20 | margin: 5px; 21 | box-shadow: var(--CategoryBoxsShadow); 22 | border-radius: 14px; 23 | animation: onloadCategoryContainer 0.3s ease; 24 | } 25 | .category_main h2 { 26 | font-size: 18px; 27 | font-weight: 400; 28 | animation: onloadcategoryTitle 0.5s ease; 29 | } 30 | @keyframes onloadcategoryTitle { 31 | from { 32 | transform: translateY(-5px); 33 | } 34 | 50% { 35 | transform: translateY(2px); 36 | } 37 | to { 38 | transform: translateY(0px); 39 | } 40 | } 41 | @keyframes onloadCategoryContainer { 42 | from { 43 | transform: scale(0.5); 44 | } 45 | 50% { 46 | transform: scale(1.01); 47 | } 48 | to { 49 | transform: scale(1); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /configs/cards.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | Instagram: [ 3 | { 4 | category: "Instagram", 5 | Name: "Image Downloader", 6 | path: "/instagram/image", 7 | isOfline: false 8 | }, 9 | { 10 | category: "Instagram", 11 | Name: "Video Downloader", 12 | path: "/instagram/video", 13 | isOfline: false 14 | }, 15 | { 16 | category: "Instagram", 17 | Name: "Reel Downloader", 18 | path: "/instagram/reel", 19 | isOfline: false 20 | }, 21 | { 22 | category: "Instagram", 23 | Name: "IGTV Downloader", 24 | path: "/instagram/igtv", 25 | isOfline: false 26 | } 27 | ], 28 | Google: [ 29 | { 30 | category: "YouTube", 31 | Name: "Video Downloader", 32 | path: "/google/youtube-video", 33 | isOfline: false 34 | }, 35 | { 36 | category: "YouTube", 37 | Name: "MP3 Downloader", 38 | path: "/google/youtube-music", 39 | isOfline: false 40 | }, 41 | { 42 | category: "Google Drive", 43 | Name: "Link Generator", 44 | path: "/google/drive-link-gen", 45 | isOfline: true 46 | } 47 | ] 48 | }; 49 | -------------------------------------------------------------------------------- /components/toolsPage-componets/copyTextBox/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState } from "react"; 2 | import styles from "../textInput/textinput.module.css"; 3 | import { Copy } from "react-feather"; 4 | 5 | export default function CopyTextBox({ value }) { 6 | const input = useRef(); 7 | const [inputValue, setInputValue] = useState(""); 8 | useEffect(() => { 9 | setInputValue(value); 10 | }, [value]); 11 | function handleCopy(e) { 12 | input.current.select(); 13 | input.current.setSelectionRange(0, 99999); 14 | document.execCommand("copy"); 15 | } 16 | return ( 17 |
18 |

19 | Copy 20 |

21 |
22 | 28 | 33 |
34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /pages/_app.jsx: -------------------------------------------------------------------------------- 1 | // import App from 'next/app' 2 | import "../styles/styles.css"; 3 | import { useRouter } from 'next/router' 4 | import * as ga from '../utils/ga' 5 | import { useEffect } from 'react' 6 | 7 | function MyApp({ Component, pageProps }) { 8 | 9 | const router = useRouter() 10 | 11 | useEffect(() => { 12 | const handleRouteChange = (url) => { 13 | ga.pageview(url) 14 | } 15 | //When the component is mounted, subscribe to router changes 16 | //and log those page views 17 | router.events.on('routeChangeComplete', handleRouteChange) 18 | 19 | // If the component is unmounted, unsubscribe 20 | // from the event with the `off` method 21 | return () => { 22 | router.events.off('routeChangeComplete', handleRouteChange) 23 | } 24 | }, [router.events]) 25 | return ; 26 | } 27 | 28 | // Only uncomment this method if you have blocking data requirements for 29 | // every single page in your application. This disables the ability to 30 | // perform automatic static optimization, causing every page in your app to 31 | // be server-side rendered. 32 | // 33 | // MyApp.getInitialProps = async (appContext) => { 34 | // // calls page's `getInitialProps` and fills `appProps.pageProps` 35 | // const appProps = await App.getInitialProps(appContext); 36 | // 37 | // return { ...appProps } 38 | // } 39 | 40 | export default MyApp; 41 | -------------------------------------------------------------------------------- /components/toolsPage-componets/textInput/textinput.module.css: -------------------------------------------------------------------------------- 1 | .textinput_container { 2 | background-color: var(--cardBackground); 3 | box-shadow: var(--cardBoxShadow); 4 | border-radius: 16px; 5 | padding: 10px 20px; 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: space-between; 9 | animation: textInput 0.5s ease; 10 | } 11 | .textinput_container button { 12 | all: unset; 13 | background: none; 14 | padding: 0; 15 | margin: 0; 16 | } 17 | .textinput_main { 18 | border: none; 19 | outline: none; 20 | width: 100%; 21 | background: none; 22 | color: var(--SubtextColor); 23 | } 24 | .textinput_title { 25 | font-family: Poppins; 26 | font-style: normal; 27 | font-weight: 500; 28 | font-size: 13px; 29 | line-height: 19px; 30 | color: var(--SubtextColor); 31 | padding: 10px 5px; 32 | animation: textInputTitle 0.5s ease; 33 | } 34 | .textinput_button { 35 | color: var(--SubtextColor); 36 | animation: textInput 0.3s ease-in; 37 | } 38 | @keyframes textInput { 39 | from { 40 | transform: translateY(-10px); 41 | } 42 | 50% { 43 | transform: translateY(5px); 44 | } 45 | to { 46 | transform: translateY(0px); 47 | } 48 | } 49 | 50 | @keyframes textInputTitle { 51 | from { 52 | transform: translateX(-10px); 53 | } 54 | 50% { 55 | transform: translateX(5px); 56 | } 57 | to { 58 | transform: translateX(0px); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /components/toolsPage-componets/Header/heroSection/heroSection.module.css: -------------------------------------------------------------------------------- 1 | .herosection_main { 2 | width: 100%; 3 | background-repeat: no-repeat; 4 | background-size: cover; 5 | display: flex; 6 | flex-direction: column; 7 | color: white; 8 | padding: 30px; 9 | margin: 5px; 10 | box-shadow: var(--herosectionBoxShadow); 11 | border-radius: 20px; 12 | margin-top: 20px; 13 | animation: onloadcategoryTitle 0.5s ease; 14 | min-height: 200px; 15 | } 16 | .herosection_main h2 { 17 | font-size: 20px; 18 | font-weight: 500; 19 | animation: onloadcategoryTitle 0.5s ease; 20 | } 21 | .herosection_main h3 { 22 | font-weight: 300; 23 | font-size: 15px; 24 | animation: onloadcategoryTitle 0.8s ease; 25 | } 26 | @keyframes onloadcategoryTitle { 27 | from { 28 | transform: translateY(-5px); 29 | } 30 | 50% { 31 | transform: translateY(2px); 32 | } 33 | to { 34 | transform: translateY(0px); 35 | } 36 | } 37 | @keyframes onloadCategoryContainer { 38 | from { 39 | transform: scale(0.5); 40 | } 41 | 50% { 42 | transform: scale(1.01); 43 | } 44 | to { 45 | transform: scale(1); 46 | } 47 | } 48 | @media only screen and (max-width: 991px) { 49 | .herosection_main h2 { 50 | margin-top: 20px; 51 | } 52 | } 53 | 54 | @media only screen and (min-width: 992px) { 55 | .herosection_main { 56 | align-items: center; 57 | justify-content: center; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /components/videoPlayer/videoComponent/videoComponent.module.css: -------------------------------------------------------------------------------- 1 | .video_C_main { 2 | margin: 10px; 3 | margin-top: 20px; 4 | min-width: 40%; 5 | max-width: 45%; 6 | } 7 | .video { 8 | border-radius: 10px; 9 | width: 100%; 10 | height: auto; 11 | box-shadow: var(--CategoryBoxsShadow); 12 | animation: loaded 0.5s ease; 13 | } 14 | .video_download_btn { 15 | border-radius: 50%; 16 | margin-right: 2px; 17 | } 18 | .video_download_btn_link { 19 | color: var(--SubtextColor); 20 | background-color: var(--cardBackground); 21 | margin-bottom: -20px; 22 | position: relative; 23 | display: flex; 24 | box-shadow: 0px 4px 4px rgba(46, 46, 46, 0.25); 25 | max-width: 45%; 26 | flex-direction: row; 27 | padding: 8px; 28 | border-radius: 20px; 29 | align-items: center; 30 | justify-content: center; 31 | font-size: 13px; 32 | z-index: 20; 33 | animation: downloadbutton 0.3s ease; 34 | } 35 | @media only screen and (max-width: 600px) { 36 | .video_C_main { 37 | max-width: 100%; 38 | } 39 | } 40 | @keyframes loaded { 41 | from { 42 | transform: translateY(-5px); 43 | } 44 | 50% { 45 | transform: translateY(2px); 46 | } 47 | to { 48 | transform: translateY(0px); 49 | } 50 | } 51 | 52 | @keyframes downloadbutton { 53 | from { 54 | transform: scale(0.5); 55 | } 56 | 60% { 57 | transform: scale(1.1); 58 | } 59 | to { 60 | transform: scale(1); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /pages/_document.jsx: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from "next/document"; 2 | // import Script from 'next/script' 3 | import { GA_TRACKING_CODE } from "../utils/ga"; 4 | 5 | class MyDocument extends Document { 6 | static async getInitialProps(ctx) { 7 | const initialProps = await Document.getInitialProps(ctx); 8 | return { ...initialProps }; 9 | } 10 | 11 | render() { 12 | return ( 13 | 14 | 15 | 19 |