├── .Dockerignore ├── .env.example ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── docs_issue.yml │ ├── others.yml │ ├── feature.yml │ └── bug_issue.yml ├── pull_request_template.md └── workflows │ ├── codeql-analysis.yml │ └── build-deploy.yml ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── Dockerfile ├── src ├── cert_templates │ ├── Template1.png │ ├── Template10.jpg │ ├── Template11.png │ ├── Template2.png │ ├── Template3.png │ ├── Template4.jpeg │ ├── Template5.png │ ├── Template6.png │ ├── Template7.png │ ├── Template8.png │ └── Template9.gif ├── components │ ├── Footer.jsx │ ├── homepage.css │ └── Homepage.jsx ├── index.js ├── index.css ├── firebase.js ├── App.js └── App.css ├── docker-compose.yml ├── .gitignore ├── LICENSE ├── package.json ├── CONTRIBUTING.md ├── README.md └── CODE_OF_CONDUCT.md /.Dockerignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | FIREBASE_KEY = 'your firebase key' -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/public/logo512.png -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:15.13-alpine 2 | WORKDIR / 3 | COPY . . 4 | RUN npm run build 5 | CMD [ "npm", "start" ] 6 | -------------------------------------------------------------------------------- /src/cert_templates/Template1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template1.png -------------------------------------------------------------------------------- /src/cert_templates/Template10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template10.jpg -------------------------------------------------------------------------------- /src/cert_templates/Template11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template11.png -------------------------------------------------------------------------------- /src/cert_templates/Template2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template2.png -------------------------------------------------------------------------------- /src/cert_templates/Template3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template3.png -------------------------------------------------------------------------------- /src/cert_templates/Template4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template4.jpeg -------------------------------------------------------------------------------- /src/cert_templates/Template5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template5.png -------------------------------------------------------------------------------- /src/cert_templates/Template6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template6.png -------------------------------------------------------------------------------- /src/cert_templates/Template7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template7.png -------------------------------------------------------------------------------- /src/cert_templates/Template8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template8.png -------------------------------------------------------------------------------- /src/cert_templates/Template9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedant-jain03/certificate-generator/HEAD/src/cert_templates/Template9.gif -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ### Fixes # 2 | 3 | ### What changes does this PR do? 4 | 5 | ### Have you tested the working of the feature you fixed?(Yes/No) -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | const year = new Date().getFullYear(); 5 | 6 | return ; 7 | }; 8 | 9 | export default Footer; 10 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.8' 2 | services: 3 | app: 4 | build: 5 | context: . 6 | ports: 7 | - 3000:3000 8 | image: app:certificate_generator 9 | container_name: certificate_generator_container 10 | command: npm start 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | // import firebase from "firebase/app"; 2 | // import "firebase/auth"; 3 | // import "firebase/firestore"; 4 | // import { config } from 'dotenv' 5 | // config(); 6 | 7 | // const key = process.env.FIREBASE_KEY; 8 | 9 | 10 | // const firebaseConfig = { 11 | // apiKey: "AIzaSyCvZYqnlVMtmDJjSQ_WNQa6nFXul9z46mk", 12 | // authDomain: "login-f4489.firebaseapp.com", 13 | // databaseURL: "https://login-f4489-default-rtdb.firebaseio.com", 14 | // projectId: "login-f4489", 15 | // storageBucket: "login-f4489.appspot.com", 16 | // messagingSenderId: "564447251099", 17 | // appId: "1:564447251099:web:1436d380f85b660590143e" 18 | // }; 19 | // firebase.initializeApp(firebaseConfig); 20 | // export default firebase; -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import React, { useState, useEffect } from 'react'; 3 | import { useReactToPrint } from 'react-to-print'; 4 | import Homepage from "./components/Homepage" 5 | import Footer from './components/Footer'; 6 | import firebase from "./firebase" 7 | import StyleFirebaseUi from "react-firebaseui/StyledFirebaseAuth"; 8 | 9 | 10 | // var uiConfig = { 11 | // signInFlow: 'popup', 12 | // signInOptions: [ 13 | // firebase.auth.GoogleAuthProvider.PROVIDER_ID 14 | // ], 15 | // callbacks: { 16 | 17 | // signInSuccessWithAuthResult: () => { 18 | // return false; 19 | // } 20 | // } 21 | // }; 22 | 23 | function App() { 24 | return ( 25 |
26 | 27 |
28 |
29 | ) 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ "master" ] 6 | pull_request: 7 | # The branches below must be a subset of the branches above 8 | branches: [ "master" ] 9 | schedule: 10 | - cron: '29 13 * * 5' 11 | 12 | jobs: 13 | analyze: 14 | name: Analyze 15 | runs-on: ubuntu-latest 16 | permissions: 17 | actions: read 18 | contents: read 19 | security-events: write 20 | 21 | strategy: 22 | fail-fast: false 23 | matrix: 24 | language: [ 'javascript' ] 25 | 26 | steps: 27 | - name: Checkout repository 28 | uses: actions/checkout@v3 29 | 30 | - name: Initialize CodeQL 31 | uses: github/codeql-action/init@v2 32 | with: 33 | languages: ${{ matrix.language }} 34 | 35 | - name: Autobuild 36 | uses: github/codeql-action/autobuild@v2 37 | 38 | - name: Perform CodeQL Analysis 39 | uses: github/codeql-action/analyze@v2 40 | with: 41 | category: "/language:${{matrix.language}}" -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs_issue.yml: -------------------------------------------------------------------------------- 1 | name: 📄 Documentation 2 | description: Found an issue in the documentation? 3 | title: "[DOCS] " 4 | labels: ["documentation"] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: A brief description of the issue 11 | validations: 12 | required: false 13 | - type: textarea 14 | id: screenshots 15 | attributes: 16 | label: Screenshots 17 | description: Add screenshots if applicable 18 | validations: 19 | required: false 20 | - type: textarea 21 | id: extrainfo 22 | attributes: 23 | label: Additional information 24 | description: Is there anything else I should know about this issue? 25 | validations: 26 | required: false 27 | - type: dropdown 28 | id: work 29 | attributes: 30 | label: Want to contribute ? 31 | description: Are you interested in working this Issue ?? (Yes/No) 32 | multiple: false 33 | options: 34 | - "Yes" 35 | - "No" 36 | validations: 37 | required: false -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 vedant-jain03 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 | -------------------------------------------------------------------------------- /.github/workflows/build-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build & deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | name: Build 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | - name: Checkout code 18 | uses: actions/checkout@v2 19 | 20 | - name: Install Node.js 21 | uses: actions/setup-node@v1 22 | with: 23 | node-version: 13.x 24 | 25 | - name: Install NPM packages 26 | run: npm ci 27 | 28 | - name: Build project 29 | run: npm run build 30 | 31 | - name: Run tests 32 | run: npm run test 33 | 34 | - name: Upload production-ready build files 35 | uses: actions/upload-artifact@v2 36 | with: 37 | name: production-files 38 | path: ./build 39 | 40 | deploy: 41 | name: Deploy 42 | needs: build 43 | runs-on: ubuntu-latest 44 | if: github.ref == 'refs/heads/main' 45 | 46 | steps: 47 | - name: Download artifact 48 | uses: actions/download-artifact@v2 49 | with: 50 | name: production-files 51 | path: ./build 52 | 53 | - name: Deploy to gh-pages 54 | uses: peaceiris/actions-gh-pages@v3 55 | with: 56 | github_token: ${{ secrets.GITHUB_TOKEN }} 57 | publish_dir: ./build 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "certificate_generator", 3 | "homepage": "http://vedant-jain03.github.io/certificate-generator", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@material-ui/core": "^4.11.4", 8 | "@material-ui/icons": "^4.11.2", 9 | "@testing-library/jest-dom": "^5.12.0", 10 | "@testing-library/react": "^11.2.7", 11 | "@testing-library/user-event": "^12.8.3", 12 | "dotenv": "^16.0.3", 13 | "firebase": "^8.6.3", 14 | "pdf-lib": "^1.16.0", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-firebaseui": "^5.0.2", 18 | "react-scripts": "4.0.3", 19 | "react-to-print": "^2.12.6", 20 | "web-vitals": "^1.1.2" 21 | }, 22 | "scripts": { 23 | "predeploy": "npm run build", 24 | "deploy": "gh-pages -d build", 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "devDependencies": { 49 | "gh-pages": "^3.2.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/others.yml: -------------------------------------------------------------------------------- 1 | name: 🔧 Other 2 | description: Use this for any other issues. Please do NOT create blank issues 3 | title: "[OTHER] " 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: "# Other issue" 8 | - type: textarea 9 | id: issuedescription 10 | attributes: 11 | label: Something else you wanna ask me About? 12 | description: Provide a clear and concise explanation of your issue. 13 | validations: 14 | required: false 15 | - type: textarea 16 | id: screenshots 17 | attributes: 18 | label: Screenshots 19 | description: Please add screenshots if applicable 20 | validations: 21 | required: false 22 | - type: textarea 23 | id: system 24 | attributes: 25 | label: "Device Information" 26 | description: What system/browser(s) are you seeing the problem on ? 27 | value: | 28 | 1. OS: [eg. iOS] 29 | 2. Browser [e.g. chrome, safari] 30 | 3. Version [e.g. 22] 31 | render: bash 32 | - type: textarea 33 | id: extrainfo 34 | attributes: 35 | label: Additional information 36 | description: Is there anything else I should know about this issue? 37 | validations: 38 | required: false 39 | - type: dropdown 40 | id: work 41 | attributes: 42 | label: Want to contribute ? 43 | description: Are you interested in working this Issue ?? (Yes/No) 44 | multiple: false 45 | options: 46 | - "Yes" 47 | - "No" 48 | validations: 49 | required: false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: 💡 Feature 2 | description: Have a new idea/feature? Please suggest 😄! 3 | title: "[FEATURE] " 4 | labels: ["enhancement"] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: Is this Issue related to a Problem, please describe it briefly 11 | validations: 12 | required: false 13 | - type: textarea 14 | id: solution 15 | attributes: 16 | label: Description 17 | description: Do you have a solution ready, give a clear description for it 18 | validations: 19 | required: false 20 | - type: textarea 21 | id: alternatives 22 | attributes: 23 | label: Alternatives 24 | description: Any alternatives you have considered, describe them briefly 25 | validations: 26 | required: false 27 | - type: textarea 28 | id: screenshots 29 | attributes: 30 | label: Screenshots 31 | description: Please add screenshots if applicable 32 | validations: 33 | required: false 34 | - type: textarea 35 | id: extrainfo 36 | attributes: 37 | label: Additional information 38 | description: Is there anything else we should know about this idea?(any dependency changes/ Miscellaneous Info) 39 | validations: 40 | required: false 41 | - type: dropdown 42 | id: work 43 | attributes: 44 | label: Want to contribute ? 45 | description: Are you interested in working this Issue ?? (Yes/No) 46 | multiple: false 47 | options: 48 | - "Yes" 49 | - "No" 50 | validations: 51 | required: false -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Certificate Generator 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_issue.yml: -------------------------------------------------------------------------------- 1 | name: 🐛 Bug 2 | title: "[BUG] " 3 | description: Found a bug ? Let me know about it 4 | labels: ["bug"] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: A brief description of the issue 11 | placeholder: Short and explicit description of your incident... 12 | validations: 13 | required: false 14 | - type: textarea 15 | id: Steps 16 | attributes: 17 | label: Steps to Recreate the Issue 18 | description: Please mention the steps in Order to recreate the Issue 19 | value: | 20 | 1. Go to '...' 21 | 2. Click on '....' 22 | 3. Scroll down to '....' 23 | 4. See error 24 | render: bash 25 | validations: 26 | required: false 27 | - type: textarea 28 | id: behaviour 29 | attributes: 30 | label: Expected Behaviour 31 | description: A clear and concise description of what you expected to happen. 32 | validations: 33 | required: false 34 | - type: textarea 35 | id: screenshots 36 | attributes: 37 | label: Screenshots 38 | description: Please add screenshots if applicable 39 | validations: 40 | required: false 41 | - type: textarea 42 | id: system 43 | attributes: 44 | label: "Device Information" 45 | description: What system/browser(s) are you seeing the problem on ? 46 | value: | 47 | 1. OS: [eg. iOS] 48 | 2. Browser [e.g. chrome, safari] 49 | 3. Version [e.g. 22] 50 | render: bash 51 | validations: 52 | required: false 53 | - type: dropdown 54 | id: work 55 | attributes: 56 | label: Want to contribute ? 57 | description: Are you interested in working this Issue ?? (Yes/No) 58 | multiple: false 59 | options: 60 | - "Yes" 61 | - "No" 62 | validations: 63 | required: false -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contribution Guidelines🏗 2 | 3 | Are we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and make it better. 4 | To start contributing, follow the below guidelines: 5 | 6 | **1.** Fork [this](https://github.com/vedant-jain03/certificate-generator) repository. 7 | 8 | **2.** Clone your forked copy of the project. 9 | 10 | ``` 11 | git clone https://github.com//certificate-generator.git 12 | ``` 13 | 14 | **3.** Navigate to the project directory :file_folder: . 15 | 16 | ``` 17 | cd certificate-generator 18 | ``` 19 | 20 | **4.** Add a reference(remote) to the original repository. 21 | 22 | ``` 23 | git remote add upstream https://github.com/vedant-jain03/certificate-generator.git 24 | ``` 25 | 26 | **5.** Check the remotes for this repository. 27 | 28 | ``` 29 | git remote -v 30 | ``` 31 | 32 | **6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository). 33 | 34 | ``` 35 | git pull upstream main 36 | ``` 37 | 38 | **7.** Create a new branch. 39 | 40 | ``` 41 | git checkout -b 42 | ``` 43 | 44 | **8.** Perfom your desired changes to the code base. 45 | 46 | **9.** Track your changes:heavy_check_mark: . 47 | 48 | ``` 49 | git add . 50 | ``` 51 | 52 | **10.** Commit your changes . 53 | 54 | ``` 55 | git commit -m "Relevant message" 56 | ``` 57 | 58 | **11.** Push the committed changes in your feature branch to your remote repo. 59 | 60 | ``` 61 | git push -u origin 62 | ``` 63 | 64 | **12.** To create a pull request, click on `compare and pull requests`. 65 | 66 | **13.** Add appropriate title and description to your pull request explaining your changes and efforts done. 67 | 68 | **14.** Click on `Create Pull Request`. 69 | 70 | 71 | **15** Voila :exclamation: You have made a PR to the awesome-javascript-projects :boom: . Wait for your submission to be accepted and your PR to be merged. 72 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | #maincontainer1{ 41 | background-color: rgb(28, 39, 43); 42 | height: 100vh; 43 | width: 100%; 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | justify-content: center; 48 | } 49 | .head{ 50 | color: white; 51 | position: relative; 52 | font-size: 2rem; 53 | } 54 | .head::after{ 55 | content: ""; 56 | position: absolute; 57 | width: 50%; 58 | top: 43px; 59 | right: 39px; 60 | height: 3px; 61 | background: white; 62 | } 63 | .head2{ 64 | font-size: 3rem; 65 | color: #ff6c37; 66 | text-transform: uppercase; 67 | margin: 2rem; 68 | position: relative; 69 | } 70 | .head2::after{ 71 | content: ""; 72 | position: absolute; 73 | width: 50%; 74 | top: 59px; 75 | right: 143px; 76 | height: 3px; 77 | background: #ff6c37; 78 | } 79 | .signin{ 80 | padding: 2rem; 81 | border: 1px solid #ff6c37; 82 | border-radius: 13px; 83 | background: #ff6c371a; 84 | } 85 | .signin h1{ 86 | color: white; 87 | text-align: center; 88 | } 89 | footer { 90 | position: fixed; 91 | background-color: rgb(28, 39, 43); 92 | color: white; 93 | bottom: 0; 94 | left: 0; 95 | right: 0; 96 | padding: 5px; 97 | text-align: center; 98 | font-size: 10px; 99 | border-top: 1px solid gray; 100 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Welcome to Certificate-Generator

2 |
3 | 4 |
5 | hacktoberfest22 6 |
7 | 8 |
9 | 10 |
11 | 12 | css 13 | js 14 | os 15 | check 16 | 17 | 18 |
19 | 20 | ## Setup Steps 21 | 22 | #### Using Docker 23 | - Make sure you have docker and docker-compose installed 24 | ``` 25 | $ docker-compose up 26 | ``` 27 | 28 | #### Manually 29 | - Go to directory 30 | ``` 31 | $ cd certificate-generator 32 | ``` 33 | - Install Dependencies 34 | ``` 35 | $ npm install 36 | ``` 37 | - Start LocalHost Server 38 | ``` 39 | $ npm run start 40 | ``` 41 | 42 | ## Tech Stack Used 43 | - Javascript 44 | - React 45 | - Firebase 46 | - Material UI 47 | 48 | # [Code of Conduct](CODE_OF_CONDUCT.md) 49 | 50 | 51 | # [Getting Started](CONTRIBUTING.md) 52 | 53 | 54 |

Contributing

55 |

56 | Thank you for your interest in contributing to our Repo! Pull requests are welcome. For fixing typos, please make a PR with your fixes. For other contributions, we suggest you to read our contribution guidelines to see how you can contribute to this project. We are happy for every contribution. 57 | 58 |

59 | 60 |

Issues & Pull Requests

61 | 62 | Before making pull requests please look at our contributing guidelines. You can start working on the issue which are mentioned in issues section or add an issue. Just drop a comment before working on the issue. Thank you! 63 | 64 |

License

65 | 66 | The **code** in this repository is licensed under the MIT license. Feel free to use and share it as per the license. 67 | 68 |
69 | 70 | # ✨ Contributors 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | love 79 | how 80 |
81 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /src/components/homepage.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .main{ 7 | height: 100vh; 8 | width: 100%; 9 | overflow: hidden; 10 | background: rgb(28, 39, 43); 11 | position: relative; 12 | } 13 | .main .header{ 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding: 1rem 1rem 1rem 4rem; 18 | border-bottom: 1px solid gray; 19 | } 20 | .main .header .left h2{ 21 | color: white; 22 | } 23 | .main .header .Middle h1{ 24 | text-transform: uppercase; 25 | color: #ff6c37; 26 | margin-right: -12rem; 27 | } 28 | .main .header .right a{ 29 | line-height: 1.5; 30 | border-radius: 3px; 31 | border: navajowhite; 32 | font-weight: 700; 33 | font-size: 14px; 34 | padding: 12px 16px; 35 | text-align: center; 36 | color: rgb(255, 255, 255); 37 | background-color: rgb(255, 108, 55) !important; 38 | border-color: rgb(255, 108, 55) !important; 39 | margin-left: 1rem; 40 | text-transform: uppercase; 41 | cursor: pointer; 42 | text-decoration: none; 43 | } 44 | .main .header .right button{ 45 | line-height: 1.5; 46 | border-radius: 3px; 47 | border: navajowhite; 48 | font-weight: 700; 49 | font-size: 14px; 50 | padding: 12px 16px; 51 | text-align: center; 52 | color: rgb(255, 255, 255); 53 | background-color: rgb(255, 108, 55) !important; 54 | border-color: rgb(255, 108, 55) !important; 55 | margin-left: 1rem; 56 | text-transform: uppercase; 57 | cursor: pointer; 58 | } 59 | .main .header .right .info{ 60 | margin: 0; 61 | border-radius: 50%; 62 | padding: 2px 10px; 63 | text-transform: lowercase; 64 | } 65 | .main .header .right a:hover,.main .header .right button:hover{ 66 | 67 | background-color: rgba(255, 108, 55, 0.847) !important; 68 | border-color: rgb(255, 108, 55) !important; 69 | } 70 | .main .header .right a .MuiSvgIcon-root 71 | { 72 | margin-bottom: -5px; 73 | } 74 | .maincontainer{ 75 | display: flex; 76 | height: 90vh; 77 | } 78 | .maincontainer .leftmost{ 79 | flex: 0.20; 80 | padding: 1rem; 81 | display: block; 82 | align-items: center; 83 | flex-direction: column; 84 | color: white; 85 | border-right: 1px gray solid; 86 | text-align: center; 87 | overflow-y: scroll; 88 | } 89 | .maincontainer .leftmost ul li{ 90 | color: #ff6c37; 91 | } 92 | .maincontainer .middle{ 93 | flex: 0.60; 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | } 98 | .maincontainer .right{ 99 | flex: 0.20; 100 | display: flex; 101 | justify-content: center; 102 | height: 100%; 103 | padding: 1rem; 104 | border-left: 1px solid gray; 105 | overflow-y: scroll; 106 | } 107 | .generate{ 108 | line-height: 1.5; 109 | border-radius: 3px; 110 | border: navajowhite; 111 | font-weight: 700; 112 | font-size: 14px; 113 | padding: 12px 16px; 114 | text-align: center; 115 | color: rgb(255, 255, 255); 116 | background-color: rgb(255, 108, 55) !important; 117 | border-color: rgb(255, 108, 55) !important; 118 | text-transform: uppercase; 119 | cursor: pointer; 120 | margin-top: 1rem; 121 | } 122 | 123 | .input-box .details{ 124 | font-weight: 500; 125 | margin-bottom: 5px; 126 | color: white; 127 | } 128 | .input-box input{ 129 | height: 45px; 130 | width: 100%; 131 | outline: none; 132 | border-radius: 5px; 133 | margin: 6px 0 10px 0; 134 | border: 1px solid rgb(107, 107, 107); 135 | padding-left: 15px; 136 | font-size: 16px; 137 | border-bottom-width: 2px; 138 | transition: all 0.3s ease; 139 | font-weight: 500; 140 | } 141 | .input-box textarea{ 142 | height: 100px; 143 | width: 100%; 144 | outline: none; 145 | border-radius: 5px; 146 | margin: 6px 0 10px 0; 147 | border: 1px solid rgb(107, 107, 107); 148 | padding-left: 15px; 149 | padding-top: 5px; 150 | font-size: 16px; 151 | border-bottom-width: 2px; 152 | transition: all 0.3s ease; 153 | font-weight: 500; 154 | font-family: inherit; 155 | } 156 | .right .form{ 157 | display: flex; 158 | flex-direction: column; 159 | } 160 | ::-webkit-scrollbar { 161 | width: 2px; 162 | } 163 | ::-webkit-scrollbar-track { 164 | background-color: transparent; 165 | } 166 | ::-webkit-scrollbar-thumb { 167 | background-color: #d6dee1; 168 | } 169 | ::-webkit-scrollbar-thumb { 170 | background-color: #d6dee1; 171 | border-radius: 20px; 172 | } 173 | ::-webkit-scrollbar-thumb { 174 | background-color: #d6dee1; 175 | border-radius: 20px; 176 | border: 6px solid transparent; 177 | background-clip: content-box; 178 | } 179 | 180 | 181 | @media all { 182 | .page-break { 183 | display: none; 184 | } 185 | } 186 | 187 | @media print { 188 | html, body { 189 | height: initial !important; 190 | overflow: initial !important; 191 | -webkit-print-color-adjust: exact; 192 | } 193 | } 194 | 195 | @media print { 196 | .page-break { 197 | margin-top: 1rem; 198 | display: block; 199 | page-break-before: auto; 200 | } 201 | } 202 | 203 | @page { 204 | size: auto; 205 | margin: 20mm; 206 | } 207 | .popup{ 208 | position: fixed; 209 | /* top: 50%; */ 210 | /* left: 50%; */ 211 | z-index: 100; 212 | background: rgba; 213 | background: rgba(0,0,0,0.5); 214 | width: 100%; 215 | height: 100%; 216 | display: flex; 217 | justify-content: center; 218 | align-items: center; 219 | flex-direction: column; 220 | transition: 1s ease; 221 | } 222 | .popup-box{ 223 | background: white; 224 | padding: 2rem; 225 | border-radius: 5px; 226 | position: relative; 227 | } 228 | .popup-box button{ 229 | position: absolute; 230 | top: -10px; 231 | right: -10px; 232 | padding: 6px 10px; 233 | border: none; 234 | background: #f44336; 235 | color: white; 236 | border-radius: 50%; 237 | font-weight: bold; 238 | cursor: pointer; 239 | } 240 | .popup-box li{ 241 | color: #ff6c37; 242 | font-weight: 400; 243 | font-size: 14px; 244 | } 245 | .leftmost .templates{ 246 | padding: 2px; 247 | overflow: hidden; 248 | border: 1px solid #f44336; 249 | margin: 1rem; 250 | border-radius: 0px; 251 | background: #ff57222b; 252 | cursor: pointer; 253 | transition: 0.5s; 254 | } 255 | .leftmost .active{ 256 | box-shadow: 0 0 5px 2px rgb(255 71 57); 257 | transform: scale(1.05) 258 | } 259 | .leftmost .templates img{ 260 | width: 100%; 261 | height: 100%; 262 | } 263 | #toggler { 264 | margin-left: 1rem; 265 | padding: 5px; 266 | background: rgba(255, 108, 55, 0.847); 267 | border: none; 268 | color: white; 269 | line-height: 1.5; 270 | border-radius: 3px; 271 | border: navajowhite; 272 | font-weight: 700; 273 | font-size: 11px; 274 | /* padding: 12px 16px; */ 275 | text-align: center; 276 | color: rgb(255, 255, 255); 277 | background-color: rgb(255, 108, 55) !important; 278 | border-color: rgb(255, 108, 55) !important; 279 | margin-left: 1rem; 280 | text-transform: uppercase; 281 | cursor: pointer; 282 | text-decoration: none; 283 | } 284 | .header .left { 285 | display: flex; 286 | align-items: center; 287 | } -------------------------------------------------------------------------------- /src/components/Homepage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react' 2 | import "./homepage.css" 3 | import { useReactToPrint } from 'react-to-print'; 4 | import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; 5 | import StarOutlineIcon from '@material-ui/icons/StarOutline'; 6 | import template1 from "../cert_templates/Template1.png"; 7 | import template2 from "../cert_templates/Template2.png"; 8 | import firebase from "../firebase" 9 | import template3 from "../cert_templates/Template3.png"; 10 | import template4 from "../cert_templates/Template4.jpeg"; 11 | import template5 from "../cert_templates/Template5.png"; 12 | import template6 from "../cert_templates/Template6.png"; 13 | import template7 from "../cert_templates/Template7.png"; 14 | import template8 from "../cert_templates/Template8.png"; 15 | import template9 from "../cert_templates/Template9.gif"; 16 | import template10 from "../cert_templates/Template10.jpg"; 17 | import template11 from "../cert_templates/Template11.png"; 18 | import ReactToPrint from 'react-to-print'; 19 | 20 | export class ComponentToPrint extends React.PureComponent { 21 | render() { 22 | // eslint-disable-next-line default-case 23 | switch(this.props.template){ 24 | case "template1":{ 25 | return ( 26 |
27 | 28 | 29 |
30 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

31 |

This is presented to

32 |

{this.props.name === '' ? 'Name' : this.props.name}

33 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

34 |
35 |
36 |

Course Director

37 |

{this.props.author === '' ? 'Author Name' : this.props.author}

38 |
39 | {this.props.logo === '' ? "" : logo} 40 | 41 |
42 | ); 43 | } 44 | case "template2":{ 45 | return ( 46 |
47 | 48 | 49 |
50 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

51 | {/*

This is presented to

*/} 52 |

{this.props.name === '' ? 'Name' : this.props.name}

53 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

54 |
55 |
56 |

Course Director

57 |

{this.props.author === '' ? 'Author Name' : this.props.author}

58 |
59 | {this.props.logo === '' ? '' : logo} 60 | 61 |
62 | ); 63 | } 64 | case "template3":{ 65 | return ( 66 |
67 | 68 | 69 |
70 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

71 |

is hereby awarded to

72 |

{this.props.name === '' ? 'Name' : this.props.name}

73 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

74 |
75 |
76 |

Course Director

77 |

{this.props.author === '' ? 'Author Name' : this.props.author}

78 |
79 | {this.props.logo === '' ? '' : logo} 80 | 81 |
82 | ); 83 | } 84 | case "template4":{ 85 | return ( 86 |
87 | 88 |

{this.props.name === '' ? 'Name' : this.props.name}

89 |
{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}
90 |

{this.props.author === '' ? 'Author Name' : this.props.author}

91 |
92 | ); 93 | } 94 | case "template5":{ 95 | return ( 96 |
97 | 98 | 99 |
100 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

101 |

This is presented to

102 |

{this.props.name === '' ? 'Name' : this.props.name}

103 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

104 |
105 |
106 |

Course Director

107 |

{this.props.author === '' ? 'Author Name' : this.props.author}

108 |
109 | {this.props.logo === '' ? "" : logo} 110 | 111 |
112 | ); 113 | } 114 | 115 | case "template6":{ 116 | return ( 117 |
118 | 119 | 120 |
121 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

122 |

is hereby awarded to

123 |

{this.props.name === '' ? 'Name' : this.props.name}

124 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

125 |
126 |
127 |

Course Director

128 |

{this.props.author === '' ? 'Author Name' : this.props.author}

129 |
130 | {this.props.logo === '' ? '' : logo} 131 | 132 |
133 | ); 134 | } 135 | 136 | case "template7":{ 137 | return ( 138 |
139 | 140 | 141 |
142 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

143 |

is hereby awarded to

144 |

{this.props.name === '' ? 'Name' : this.props.name}

145 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

146 |
147 |
148 |

Course Director

149 |

{this.props.author === '' ? 'Author Name' : this.props.author}

150 |
151 | {this.props.logo === '' ? '' : logo} 152 | 153 |
154 | ); 155 | } 156 | 157 | case "template8":{ 158 | return ( 159 |
160 | 161 | 162 |
163 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

164 |

is hereby awarded to

165 |

{this.props.name === '' ? 'Name' : this.props.name}

166 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

167 |
168 |
169 |

Course Director

170 |

{this.props.author === '' ? 'Author Name' : this.props.author}

171 |
172 | {this.props.logo === '' ? '' : logo} 173 | 174 |
175 | ); 176 | } 177 | 178 | case "template9":{ 179 | return ( 180 |
181 | 182 | 183 |
184 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

185 |

is hereby awarded to

186 |

{this.props.name === '' ? 'Name' : this.props.name}

187 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

188 |
189 |
190 |

Course Director

191 |

{this.props.author === '' ? 'Author Name' : this.props.author}

192 |
193 | {this.props.logo === '' ? '' : logo} 194 | 195 |
196 | 197 | ); 198 | 199 | } 200 | case "template10":{ 201 | return ( 202 |
203 | 204 | 205 |
206 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

207 |

is hereby awarded to

208 |

{this.props.name === '' ? 'Name' : this.props.name}

209 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

210 |
211 |
212 |

Course Director

213 |

{this.props.author === '' ? 'Author Name' : this.props.author}

214 |
215 | {this.props.logo === '' ? '' : logo} 216 | 217 |
218 | 219 | ); 220 | 221 | } 222 | case "template11":{ 223 | return ( 224 |
225 | 226 | 227 |
228 |

{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}

229 |

is hereby awarded to

230 |

{this.props.name === '' ? 'Name' : this.props.name}

231 |

{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}

232 |
233 |
234 |

Course Director

235 |

{this.props.author === '' ? 'Author Name' : this.props.author}

236 |
237 | {this.props.logo === '' ? '' : logo} 238 | 239 |
240 | 241 | ); 242 | 243 | } 244 | 245 | } 246 | 247 | } 248 | } 249 | const Popup = (props) => { 250 | return (props.trigger) ? ( 251 |
252 |
253 | 254 |

Rules for Setup Printing Page

255 |
256 |
  • Destination: Save as PDF
    • 257 |
  • Pages: All
    • 258 |
  • Layout: Landscape
    • 259 |
    260 |

    More Settings

    261 |
    262 |
  • Paper Size: A4
    • 263 |
  • Paper per Sheet:1
    • 264 |
  • Margins: none
    • 265 |
  • Scale: Custom 200
    • 266 |
    267 |
    268 |
    269 | ) : null; 270 | } 271 | function Homepage() { 272 | const [pop, setpop] = useState(false); 273 | const [name, setname] = useState(''); 274 | const [heading, setheading] = useState(''); 275 | const [desc, setdesc] = useState(''); 276 | const [author, setauthor] = useState(''); 277 | const [logo, setlogo] = useState(''); 278 | const [template,settemplate]=useState('template4'); 279 | const componentRef = useRef(); 280 | const [theme, setTheme] = useState("dark"); 281 | const handlePrint = useReactToPrint({ 282 | content: () => componentRef.current, 283 | }); 284 | const signout = () => { 285 | firebase.auth().signOut(); 286 | } 287 | const toggleTheme =() => { 288 | if(theme == "dark") { 289 | setTheme("light"); 290 | } 291 | else { 292 | setTheme("dark"); 293 | } 294 | } 295 | return ( 296 |
    297 | 298 | 299 |
    300 |
    301 |

    Hash/Hub

    302 | 303 |
    304 |
    305 |

    Certificate Generator

    306 |
    307 |
    308 | 309 | Contribute 310 | Give us 311 |
    312 |
    313 |
    314 |
    315 |

    Templates

    316 |
    settemplate("template1")} > 317 | 318 |
    319 |
    settemplate("template2")} > 320 | 321 |
    322 |
    settemplate("template3")} > 323 | 324 |
    325 |
    settemplate("template4")} > 326 | 327 |
    328 |
    settemplate("template5")} > 329 | 330 |
    331 |
    settemplate("template6")} > 332 | 333 |
    334 |
    settemplate("template7")} > 335 | 336 |
    337 |
    settemplate("template8")} > 338 | 339 |
    340 |
    settemplate("template9")} > 341 | 342 |
    343 |
    settemplate("template10")} > 344 | 345 |
    346 |
    settemplate("template11")} > 347 | 348 |
    349 |
    350 |
    351 | 352 |
    353 |
    354 |
    355 |
    356 | Heading 357 | { setheading(e.target.value) }} /> 358 |
    359 |
    360 | Particpant Name 361 | { setname(e.target.value) }} /> 362 |
    363 |
    364 | Description 365 |