├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_report.md │ └── other_issue.md └── pull_request_template.md ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── Assets └── shuffle.svg ├── Components ├── Console │ ├── console.module.css │ └── index.js ├── GithubButton │ ├── githubbutton.module.css │ └── index.js ├── Navbar │ ├── index.js │ └── navbar.module.css └── Playground │ ├── index.js │ └── playground.module.css ├── Utilities └── UtilityFunctions.js └── index.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Create a bug report to help us resolving the bug 4 | title: '🪲[BUG] Write a suitable title' 5 | lables: 'bug' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Report 3 | about: Suggest an interesting feature idea for this project 4 | title: '💡[FEATURE] Write a suitable title' 5 | lables: 'enhancement' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 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 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other_issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Other 3 | about: Issues that are not categorized yet 4 | title: '⚡[OTHER] Give a suitable title' 5 | lables: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Give a description of the problem/anything that you need to inform us. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Pull Request Template 2 | 3 | ## Fixes Issue 4 | 5 | **Closes #[issue_number_here]** 6 | 7 | ## Proposed Changes 8 | 9 | 10 | 11 | ## Checklist 12 | 13 | Please check all the applicable boxes. To mark a box as done, use the following conventions: 14 | 15 | ``` 16 | - [x] - Correct; marked as done 17 | - [ ] - Not correct; marked as **not** done 18 | ``` 19 | 20 | - [ ] My code follows the code style of this project. 21 | - [ ] My commit messages are clear and concise 22 | - [ ] The title and description of the PR are clear and explain the approach. 23 | - [ ] I have performed a self-review of the code. 24 | - [ ] I have added proper comments wherever needed. 25 | - [ ] I have run my code through prettier to ensure consistency. 26 | 27 | ## Notes to Reviewers 28 | 29 | 30 | 31 | ## Screenshots 32 | 33 | 34 | 35 | ## Test Plan 36 | 37 | 38 | 39 | ## Related Issues 40 | 41 | 42 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Screenbows 2 | Screenbows is a web-based color generation tool that allows you to create and download beautiful color palettes as image files for your design and development projects 3 | 4 | The project is deployed at [Screenbows](https://manancodes.github.io/Screenbows/) 5 | 6 | ![Desktop image](https://github.com/joanita-51/Screenbows/assets/82649346/cecff8cf-682a-478c-85ff-ed93a7b1eff9) 7 | ![Mobile image](https://github.com/joanita-51/Screenbows/assets/82649346/d532b552-87bc-4754-9cf7-36a5939d8aa1) 8 | ![Mobile image with a shuffled color](https://github.com/joanita-51/Screenbows/assets/82649346/fb0bb893-d8c7-4104-be9a-6d43fd05dc12) 9 | ![Mobile image with a shuffled color](https://github.com/joanita-51/Screenbows/assets/82649346/d67875ad-f3fe-4b06-9dca-3f2df94f7160) 10 | 11 | ## Why Screenbows? 12 | Screenbows offers a user-friendly way to generate and download beautiful colors for your projects. 13 | 14 | Whether you need color inspiration or want to create eye-catching visuals, Screenbows simplifies the process by providing a range of features for color generation and customization. 15 | 16 | With Screenbows, you can effortlessly obtain hex codes for colors and save your preferred color as an image, making it an essential tool for designers, developers, and anyone in need of vibrant color schemes. 17 | 18 | ## Table of Contents 19 | 20 | - [Features](#features) 21 | - [Installation](#installation) 22 | - [Prerequisites](#prerequisites) 23 | - [Installation Steps](#installation-steps) 24 | - [Usage](#usage) 25 | - [Contributing](#contributing) 26 | 27 | 28 | ## Features 29 | 30 | - Click on the button with the shuffle icon to generate a new color. 31 | - Get the hex code of the color that is generated. 32 | - Download the color as an image with one click. 33 | - Adjustable width and height of the image. 34 | - Easy-to-use. 35 | - The hex code can be added manually as well, simply type the preferred code in the hexa code input box 36 | 37 | ## Installation 38 | 39 | ### Prerequisites 40 | 41 | Before you begin, ensure you have met the following requirements: 42 | 43 | - Node.js installed on your local machine. 44 | - Git installed on your local machine. 45 | 46 | ### Installation Steps 47 | 48 | 1. Clone the repository to your local machine: 49 | 50 | `git clone https://github.com/manancodes/Screenbows` 51 | 52 | 2. Change directory to the project folder: 53 | 54 | `cd Screenbows` 55 | 56 | 3. Install the dependencies: 57 | 58 | `npm install` 59 | 60 | 4. Run Screenbows: 61 | 62 | `npm start` 63 | 64 | ## Usage 65 | 66 | Screenbows is designed to be user-friendly and is accessible on both desktop and mobile devices. Follow these steps to make the most of this color generation tool: 67 | 68 | 1. **Generate a New Color:** Click the "Shuffle icon" button to generate a new color. 69 | 70 | ![Shuffle Color](https://github.com/joanita-51/Screenbows/assets/82649346/acce79c9-e7c2-4642-92d4-a8525013c7b0) 71 | 72 | 73 | 2. **Get the Hex Code:** Once a color is generated, you can easily obtain the hex code of the color by copying it. 74 | 75 | ![Hex Code](https://github.com/joanita-51/Screenbows/assets/82649346/89af5260-9cb7-4aaa-9293-0f5e91c4baee) 76 | 77 | 78 | 3. **Download as Image:** Want to save the color for later use? Simply click the "Download" button to save it as an image. 79 | 80 | ![Download Color](https://github.com/joanita-51/Screenbows/assets/82649346/687c5371-88fc-4832-826d-9cb4a3e78dad) 81 | 82 | 83 | 4. **Customize Image Dimensions:** If you need a color of specific dimensions, you can adjust the width and height of the image before downloading it. 84 | 85 | ![Customize Image](https://github.com/joanita-51/Screenbows/assets/82649346/32e31d94-7d93-4af6-aca5-0167e78d63c0) 86 | 87 | 88 | 5. **Manually Enter Hex Code:** If you have a specific color in mind, you can manually input the hex code in the provided input box to generate that exact color. 89 | 90 | ![Manual Hex Entry](https://github.com/joanita-51/Screenbows/assets/82649346/fc53bb5c-bed3-4558-be98-0fd33a2e6ef5) 91 | 92 | 93 | ## Contributing 94 | We welcome contributions from the community. If you would like to contribute to Screenbows, please follow these steps: 95 | 96 | - Fork the repository on GitHub. 97 | - Clone your fork to your local machine. 98 | - Create a new branch with a descriptive name. 99 | - Make your changes and commit them. 100 | - Push your changes to your fork on GitHub. 101 | - Open a pull request on the main repository. 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "screenbows", 3 | "version": "0.1.0", 4 | "homepage": "https://manancodes.github.io/Screenbows", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "dom-to-image": "^2.6.0", 11 | "file-saver": "^2.0.5", 12 | "react": "^18.2.0", 13 | "react-color": "^2.19.3", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject", 23 | "predeploy": "npm run build", 24 | "deploy": "gh-pages -d build" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "gh-pages": "^5.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manancodes/Screenbows/dba230433bb65e968779021a0eeb62a442dcca8a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 20 | Screenbows 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Screenbows", 3 | "name": "Screenbows", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff" 8 | } 9 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | /* Global styles */ 2 | * { 3 | font-family: "Space Mono", monospace; 4 | } 5 | body { 6 | margin: 0; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | import "./App.css"; 4 | import Playground from "./Components/Playground"; 5 | import { 6 | randomColorGenerator, 7 | randomPattern, 8 | makeSecondaryColor, 9 | } from "./Utilities/UtilityFunctions"; 10 | 11 | function App() { 12 | const [primaryColor, setPrimaryColor] = useState(); 13 | const [secondaryColor, setSecondaryColor] = useState(); 14 | 15 | // function to select color from color-picker 16 | const handleColorChange = (newColor) => { 17 | setPrimaryColor(newColor.hex); 18 | setSecondaryColor(makeSecondaryColor(newColor.hex)); 19 | }; 20 | 21 | const getRandomColors = (e) => { 22 | var { primary, secondary } = randomColorGenerator(e); 23 | setPrimaryColor(primary); 24 | setSecondaryColor(secondary); 25 | }; 26 | useEffect(() => { 27 | function watchSpace(e) { 28 | if (e.keyCode === 32) getRandomColors(); 29 | } 30 | window.addEventListener("keydown", watchSpace); 31 | return function () { 32 | // Cleaning up... 33 | window.removeEventListener("keydown", watchSpace); 34 | getRandomColors(); 35 | }; 36 | }, []); 37 | 38 | return ( 39 | 46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /src/Assets/shuffle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/Components/Console/console.module.css: -------------------------------------------------------------------------------- 1 | .console { 2 | background-color: white; 3 | color: black; 4 | display: flex; 5 | justify-content: space-evenly; 6 | align-items: center; 7 | width: 700px; 8 | height: 90px; 9 | padding: 30px; 10 | box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.3); 11 | margin: 100px; 12 | } 13 | .newColorBtn { 14 | width: 40px; 15 | padding: 0; 16 | margin: 0; 17 | margin-right: 35px; 18 | line-height: 0; 19 | } 20 | 21 | .box { 22 | margin-top: -18px; 23 | font-size: x-small; 24 | } 25 | .box > p { 26 | margin: 0; 27 | margin-bottom: 3px; 28 | margin-right: 35px; 29 | } 30 | .inputContainer { 31 | border: 1px solid black; 32 | height: 38px; 33 | display: flex; 34 | align-items: center; 35 | } 36 | .hexbox { 37 | width: 110px; 38 | justify-content: flex-start; 39 | } 40 | .hexspan { 41 | color: grey; 42 | padding: 6px; 43 | padding-right: 0; 44 | } 45 | .hexinput { 46 | padding-left: 5px; 47 | } 48 | .colorPicker { 49 | position: absolute; 50 | top: 100%; 51 | left: -40%; 52 | z-index: 1000; 53 | } 54 | 55 | .downloadBtn { 56 | padding: 0px 28px; 57 | } 58 | .console button { 59 | background-color: black; 60 | border: none; 61 | color: white; 62 | height: 40px; 63 | } 64 | input:focus, 65 | button:focus { 66 | outline: none; 67 | } 68 | .dimensionsbox { 69 | display: flex; 70 | justify-content: space-between; 71 | } 72 | .dimensionsbox > div { 73 | margin-left: 10px; 74 | margin-right: 10px; 75 | } 76 | .console input { 77 | border: none; 78 | width: 100%; 79 | font-size: 13px; 80 | } 81 | .console input.right { 82 | text-align: right; 83 | } 84 | .inputBox { 85 | width: 78px; 86 | border: 1px solid black; 87 | height: 38px; 88 | display: flex; 89 | align-items: center; 90 | margin-right: 10px; 91 | } 92 | span { 93 | color: grey; 94 | padding: 10px; 95 | padding-left: 0px; 96 | } 97 | .console input.right { 98 | text-align: right; 99 | } 100 | .upperbox { 101 | display: flex; 102 | justify-content: space-between; 103 | } 104 | 105 | .patternBtn { 106 | padding: 0px 28px; 107 | margin-right: 15px; 108 | } 109 | 110 | .console .patternBtn { 111 | width: 80px; 112 | height: 40px; 113 | background-color: transparent; 114 | position: relative; 115 | border: 1px solid black; 116 | transition: background-color 0.3s; 117 | cursor: pointer; 118 | overflow: hidden; 119 | } 120 | 121 | .console .toggleContainer { 122 | width: 80px; 123 | height: 40px; 124 | display: flex; 125 | position: absolute; 126 | left: 0; 127 | transition: transform 0.3s; 128 | top: 0; 129 | } 130 | 131 | .console .toggleSwitch { 132 | width: 40px; 133 | height: 40px; 134 | border: 1px solid black; 135 | position: absolute; 136 | transition: transform 0.3s; 137 | top: 0; 138 | } 139 | 140 | .console .toggleSwitch.on { 141 | transform: translateX(38px); 142 | background-color: black; 143 | } 144 | 145 | .console .toggleSwitch.off { 146 | background-color: black; 147 | } 148 | 149 | @media only screen and (max-width: 720px) { 150 | .console { 151 | width: 50%; 152 | height: 210px; 153 | flex-direction: column; 154 | align-items: stretch; 155 | justify-content: space-between; 156 | transform: scale(1.3); 157 | position: fixed; 158 | top: 10%; 159 | } 160 | .upperbox { 161 | margin-top: 20px; 162 | } 163 | .dimensionsbox > div { 164 | margin: 0; 165 | } 166 | .console .hexbox { 167 | margin: 0px; 168 | } 169 | .console .inputBox { 170 | width: 62px; 171 | } 172 | .right { 173 | margin-right: 4px; 174 | } 175 | .hexbox { 176 | width: 78px; 177 | } 178 | 179 | .patternBtn { 180 | margin: 0; 181 | margin-bottom: 2px; 182 | } 183 | 184 | .patterns { 185 | padding-top: 20px; 186 | } 187 | 188 | .colorPicker { 189 | position: absolute; 190 | top: 100%; 191 | left: -150%; 192 | z-index: 1000; 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /src/Components/Console/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import styles from "./console.module.css"; 3 | import { parseDisplayValue } from "../../Utilities/UtilityFunctions"; 4 | import domtoimage from "dom-to-image"; 5 | import { saveAs } from "file-saver"; 6 | import { SketchPicker } from "react-color"; 7 | 8 | export default function Console(props) { 9 | var { primaryColor, getRandomColors, handleColorChange } = props; 10 | 11 | // State to handle color-picker pop-up 12 | const [showColorPicker, setShowColorPicker] = useState(false); 13 | // Function to open the color picker 14 | const openColorPicker = (e) => { 15 | e.stopPropagation(); 16 | setShowColorPicker(true); 17 | }; 18 | // Function to close the color picker 19 | const closeColorPicker = () => { 20 | setShowColorPicker(false); 21 | }; 22 | // A click event listener to the document for closing the color-picker pop-up 23 | useEffect(() => { 24 | document.addEventListener('click', closeColorPicker); 25 | 26 | // Clean up the event listener when the component unmounts 27 | return () => { 28 | document.removeEventListener('click', closeColorPicker); 29 | }; 30 | }, []); 31 | 32 | const downloadHandler = (event) => { 33 | event.preventDefault(); 34 | console.log(primaryColor.length, primaryColor); 35 | if (primaryColor.length !== 7) { 36 | alert("Please enter a valid Hex"); 37 | return; 38 | } 39 | domtoimage 40 | .toBlob(document.getElementById("image")) 41 | .then((blob) => 42 | saveAs(blob, `${primaryColor.toUpperCase()}_Background.jpg`) 43 | ); 44 | }; 45 | return ( 46 |
47 | {/* For mobile alignment */} 48 |
49 | {/* Random Color Button */} 50 | 61 | {/* Hex Input Box */} 62 |
63 |

hex code

64 |
65 | # 66 | { 72 | getRandomColors(e.target.value); 73 | }} 74 | /> 75 |
76 | { 77 | // Display color picker if showColorPicker=true 78 | showColorPicker && ( 79 |
83 | 87 |
88 | ) 89 | } 90 |
91 |
92 | {/* Size Controls */} 93 |
94 |
95 |

height

96 |
97 | 104 | px 105 |
106 |
107 |
108 |

width

109 |
110 | 117 | px 118 |
119 |
120 |
121 | {/* Random Pattern Button */} 122 |
123 |

patterns

124 | 133 |
134 | 135 | {/* Download Button */} 136 | 139 |
140 | ); 141 | } 142 | -------------------------------------------------------------------------------- /src/Components/GithubButton/githubbutton.module.css: -------------------------------------------------------------------------------- 1 | .github { 2 | border: 1px solid white; 3 | padding: 6px 16px; 4 | font-size: 16px; 5 | } 6 | .githublink { 7 | color: inherit; 8 | text-decoration: none; 9 | } 10 | -------------------------------------------------------------------------------- /src/Components/GithubButton/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import styles from "./githubbutton.module.css"; 4 | 5 | export default function GithubButton(props) { 6 | var { secondaryColor } = props; 7 | return ( 8 |
9 | 16 | Github 17 | 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/Components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./navbar.module.css"; 3 | import GithubButton from "../GithubButton"; 4 | 5 | export default function Navbar(props) { 6 | var { secondaryColor } = props; 7 | 8 | return ( 9 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/Components/Navbar/navbar.module.css: -------------------------------------------------------------------------------- 1 | .maincontainer { 2 | display: flex; 3 | justify-content: space-between; 4 | position: fixed; 5 | top: 0; 6 | width: 95%; 7 | padding: 40px; 8 | font-weight: 900; 9 | } 10 | .logo { 11 | margin: 0; 12 | font-size: 20px; 13 | } 14 | @media only screen and (max-width: 720px) { 15 | .desktopshare { 16 | display: none; 17 | } 18 | .maincontainer { 19 | justify-content: center; 20 | transform: scale(1.3); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Components/Playground/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import styles from "./playground.module.css"; 4 | import Navbar from "../Navbar"; 5 | import Console from "../Console"; 6 | import GithubButton from "../GithubButton"; 7 | 8 | function Playground(props) { 9 | var { 10 | primaryColor, 11 | secondaryColor, 12 | getRandomColors, 13 | randomPattern, 14 | handleColorChange, 15 | } = props; 16 | const [dimensions, setdimensions] = useState({ 17 | height: window.innerHeight, 18 | width: window.innerWidth, 19 | }); 20 | 21 | const [patterns, setPattern] = useState(false); 22 | 23 | let pattern; 24 | let size; 25 | 26 | const togglePatterns = () => { 27 | setPattern(!patterns); 28 | }; 29 | 30 | if (patterns) { 31 | pattern = randomPattern.pattern; 32 | size = randomPattern.size; 33 | } 34 | 35 | const changeDimensions = (e) => { 36 | setdimensions({ ...dimensions, [e.target.name]: Number(e.target.value) }); 37 | }; 38 | return ( 39 |
47 |
48 |
58 |
59 | 60 | 69 |
70 | 71 |
72 |
73 | ); 74 | } 75 | 76 | export default Playground; 77 | -------------------------------------------------------------------------------- /src/Components/Playground/playground.module.css: -------------------------------------------------------------------------------- 1 | .background { 2 | min-height: 100vh; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | .noOverflow { 8 | height: 100vh; 9 | position: absolute; 10 | z-index: -1; 11 | } 12 | .githubMobile { 13 | display: none; 14 | } 15 | @media only screen and (max-width: 720px) { 16 | .githubMobile { 17 | display: block; 18 | position: fixed; 19 | bottom: 60px; 20 | transform: scale(1.3); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Utilities/UtilityFunctions.js: -------------------------------------------------------------------------------- 1 | export const randomColorGenerator = (hex) => { 2 | const primary = typeof hex == "string" ? parseInput(hex) : makePrimaryColor(); 3 | const secondary = makeSecondaryColor(primary); 4 | return { primary, secondary }; 5 | }; 6 | 7 | //generate a random color for every refresh 8 | const makePrimaryColor = () => { 9 | const color = 10 | "#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0"); 11 | return color; 12 | }; 13 | 14 | //get a contrast color according to the background for better visibility 15 | export const makeSecondaryColor = (primary) => { 16 | var r = parseInt(primary.substring(1, 3), 16); // hexToR 17 | var g = parseInt(primary.substring(3, 5), 16); // hexToG 18 | var b = parseInt(primary.substring(5, 7), 16); // hexToB 19 | return r * 0.299 + g * 0.587 + b * 0.114 > 130 ? "#000000" : "#ffffff"; 20 | }; 21 | 22 | //parse the input by the user for internal use 23 | const parseInput = (hex) => { 24 | return hex.length === 6 ? "#" + hex : hex; 25 | }; 26 | 27 | //parse the input by the user for display 28 | export const parseDisplayValue = (val) => { 29 | var firstLetter = val?.charAt(0); 30 | var value; 31 | if (firstLetter === "#") { 32 | value = val?.substring(1); 33 | } else if (firstLetter !== "#" && val?.length === 7) { 34 | value = val?.slice(0, -1); 35 | } else { 36 | value = val ? val : undefined; 37 | } 38 | return value?.toUpperCase(); 39 | }; 40 | 41 | // get random pattern from a list 42 | export const randomPattern = (primaryColor, secondaryColor) => { 43 | let temp; 44 | if (secondaryColor === "#000000") { 45 | temp = "#ffffff"; 46 | } else { 47 | temp = "#000000"; 48 | } 49 | 50 | const patterns = [ 51 | { 52 | name: "linear", 53 | pattern: `repeating-linear-gradient( 54 | 45deg, 55 | ${temp}, 56 | ${temp} 10px, 57 | ${primaryColor} 10px, 58 | ${primaryColor} 20px 59 | )`, 60 | }, 61 | { 62 | name: "circle", 63 | pattern: `repeating-radial-gradient( 64 | circle, 65 | ${temp}, 66 | ${temp} 10px, 67 | ${primaryColor} 10px, 68 | ${primaryColor} 20px 69 | )`, 70 | }, 71 | { 72 | name: "dots", 73 | pattern: `radial-gradient( 74 | circle, 75 | ${temp}, 76 | ${temp} 50%, 77 | ${primaryColor} 50%, 78 | ${primaryColor} 79 | )`, 80 | size: `6px 6px`, 81 | }, 82 | { 83 | name: "dots-big", 84 | pattern: `radial-gradient( 85 | circle, 86 | ${temp}, 87 | ${temp} 50%, 88 | ${primaryColor} 50%, 89 | ${primaryColor} 90 | )`, 91 | size: `20px 20px`, 92 | }, 93 | ]; 94 | 95 | const randomPatternObject = 96 | patterns[Math.floor(Math.random() * patterns.length)]; 97 | 98 | return randomPatternObject; 99 | }; 100 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById("root")); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | --------------------------------------------------------------------------------