├── .gitignore
├── README.md
├── comming-soon.html
├── home.html
├── package.json
└── public
    ├── assets
        ├── blur-tool.html
        ├── border-tool.html
        ├── box-shadow-tool.html
        ├── brightness-tool.html
        ├── contrast-tool.html
        ├── font-size-tool.html
        ├── font-weight-tool.html
        ├── grayscale-tool.html
        ├── hue-rotate-tool.html
        ├── invert-tool.html
        ├── letter-spacing-tool.html
        ├── line-height-tool.html
        ├── opacity-tool.html
        ├── saturate-tool.html
        ├── scaleX-tool.html
        ├── scaleY-tool.html
        ├── sepia-tool.html
        ├── skewX-tool.html
        ├── skewY-tool.html
        ├── text-align-tool.html
        ├── text-color-tool.html
        ├── text-decoration-tool.html
        ├── text-overflow-tool.html
        ├── text-shadow-tool.html
        ├── text-stroke-tool.html
        ├── text-transform-tool.html
        ├── translateX-tool.html
        ├── translateY-tool.html
        └── white-space-tool.html
    ├── components
        ├── aside
        │   └── aside.css
        ├── custom
        │   └── custom.css
        ├── filter-style
        │   └── filter-style.css
        └── image-comparison-slider
        │   ├── image-comparison-slider.css
        │   └── image-comparison-slider.min.js
    └── content
        ├── css
            ├── comming-soon.css
            ├── generate-pannel.css
            ├── home.css
            └── tools
            │   ├── border-tool.css
            │   ├── box-shadow-tool.css
            │   ├── font-size-tool.css
            │   ├── font-weight-tool.css
            │   ├── letter-spacing-tool.css
            │   ├── line-height-tool.css
            │   ├── opacity-tool.css
            │   ├── scaleX-tool.css
            │   ├── scaleY-tool.css
            │   ├── skewX-tool.css
            │   ├── skewY-tool.css
            │   ├── text-align-tool.css
            │   ├── text-color-tool.css
            │   ├── text-decoration-tool.css
            │   ├── text-overflow-tool.css
            │   ├── text-shadow-tool.css
            │   ├── text-stroke-tool.css
            │   ├── text-transform-tool.css
            │   ├── translateX-tool.css
            │   ├── translateY-tool.css
            │   └── white-space-tool.css
        ├── img
            ├── background-tool
            │   └── body-background.png
            ├── css-img
            │   ├── css.png
            │   └── css3.jpg
            ├── pannel
            │   └── pannel_back
            │   │   └── pannel_back.png
            ├── triangle
            │   └── triangle.png
            └── wallpaper
            │   └── main-image.jpg
        └── js
            ├── home.js
            ├── modules
                ├── functions.js
                ├── image-preview.js
                ├── pickr.js
                ├── resizer.js
                └── responsive-pannel.js
            ├── tools
                ├── blur-tool.js
                ├── border-tool.js
                ├── box-shadow-tool.js
                ├── brightness-tool.js
                ├── contrast-tool.js
                ├── font-size-tool.js
                ├── font-weight-tool.js
                ├── grayscale-tool.js
                ├── hue-rotate-tool.js
                ├── invert-tool.js
                ├── letter-spacing-tool.js
                ├── line-height-tool.js
                ├── opacity-tool.js
                ├── saturate-tool.js
                ├── scaleX-tool.js
                ├── scaleY-tool.js
                ├── sepia-tool.js
                ├── skewX-tool.js
                ├── skewY-tool.js
                ├── text-align-tool.js
                ├── text-color-tool.js
                ├── text-decoration-tool.js
                ├── text-overflow-tool.js
                ├── text-shadow-tool.js
                ├── text-stroke-tool.js
                ├── text-transform-tool.js
                ├── translateX-tool.js
                ├── translateY-tool.js
                └── white-space-tool.js
            └── validate-inputs-comming-soon.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package-lock.json
3 | .vscode/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS3 Generator
 2 | Css Generator helps you to get acquainted with different types of properties in css. You can use many tools to get css code 😉🧨
 3 | 
 4 | ## How to run project
 5 |     Clone this repo 
 6 |     Install NodeJs
 7 |     Open Cmd or Terminal and go to Css Generator directory
 8 |     Enter npm i
 9 |     then open with live-server
10 | 
11 | # Preview
12 | ![css-generator](https://user-images.githubusercontent.com/89915857/137693802-0738bc64-ca17-41fd-ac1b-fb8dcbe7855c.png)
13 | 
14 | # Why I created my own css generator 🤔?
15 | I wanted to create something that have chalange  for me and it will be useful. I decided create a css generator that is a special to others css generators.so I saw a lot of css generators to list what should my own css generator actually have? It should has a pretty pages and I have to pay attention to the design of tools pages. because more css generators doesn't attention to design pages. they just created tools but not many tools! so step 2 was I should make more tools that other generators doesn't have them. all of these tools that my generator having right now it be so many in future.I really wanted to make everything special and I hope it be useful for you 😉🤞
16 | 
17 | # Best Features ( comming soon ):
18 | CSS Generator has some nice tools to make components for your project like:
19 | - Glassmorphism
20 | - Neomorphism
21 | - Animation
22 | - Button Generator
23 | - More nice tools are comming
24 | 
25 | # Other Tools
26 | You have a lot of tools like:
27 | - Box tools:
28 |   - Box-Shadow
29 |   - Border
30 |   - Border-Radius ( comming soon )
31 |   - Opacity
32 |   - Other tools are comming
33 | - Text tools:
34 |   - Color
35 |   - Font-Size
36 |   - Font-Weight
37 |   - Text-Gradient ( comming soon )
38 |   - Text-Shadow
39 |   - Letter-Spacing
40 |   - Text-Stroke
41 |   - Text-Align
42 |   - Line-Height
43 |   - Text-Decoration
44 |   - Text-Transform
45 |   - White-Space
46 |   - Text-Overflow
47 | - Transform tools:
48 |   - TranslateX
49 |   - TransformY
50 |   - ScaleX
51 |   - ScaleY
52 |   - SkewX
53 |   - SkewY
54 |   - Other tools are comming
55 | - Filter tools:
56 |   - Blur
57 |   - Brightness
58 |   - Contrast
59 |   - GrayScale
60 |   - Hue-Rotate
61 |   - Invert
62 |   - Saturate
63 |   - Sepia
64 | 


--------------------------------------------------------------------------------
/comming-soon.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Comming Soon</title>
 8 |     <link rel="icon" href="public/content/img/css-img/css.png" sizes="any">
 9 |     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
10 |     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
11 |     <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
12 |     <link rel="stylesheet" href="public/content/css/comming-soon.css">
13 | </head>
14 | <body>
15 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
16 |     <div class="wrap d-flex flex-row-reverse">
17 |         <!-- ! --------------------------- wrap left box ---------------------------- ! -->
18 |         <div class="wrap-left-box h-100 col-md-7 col-lg-6 d-flex align-items-center justify-content-center">
19 |             <div class="col-xxl-7 col-xl-8 col-lg-10" style="z-index: 9999;">
20 |                 <div class="form-wrap">
21 |                     <form accept="" method="">
22 |                         <h5 class="text-capitalize text-white form-wrap-title text-center mt-2">Send to your email</h5>
23 |                         <!-- ! ------------------------------ username ------------------------------- ! -->
24 |                         <div class="col-12 mt-4">
25 |                             <div class="input-group border-bottom">
26 |                                 <span class="input-group-text"><i class="bi bi-cursor-text"></i></span>
27 |                                 <input type="text" class="form-control user-name-inp" placeholder="Name" name="name">
28 |                             </div>
29 |                             <!-- ! --------------------------- validation text --------------------------- ! -->
30 |                             <p class="mt-3 validation-text" id="user-name-validate"></p>
31 |                         </div>
32 |                         <!-- ! -------------------------------- email -------------------------------- ! -->
33 |                         <div class="col-12 mt-4">
34 |                             <div class="input-group border-bottom">
35 |                                 <span class="input-group-text"><i class="bi bi-envelope"></i></span>
36 |                                 <input type="text" class="form-control email-inp" placeholder="Email" name="email">
37 |                             </div>
38 |                             <!-- ! --------------------------- validation text --------------------------- ! -->
39 |                             <p class="mt-3 validation-text" id="email-validate"></p>
40 |                         </div>
41 |                         <div class="col-12 mt-5">
42 |                             <input type="submit" class="send-btn" disabled value="SEND" />
43 |                         </div>
44 |                     </form>
45 |                 </div>
46 |             </div>
47 |         </div>
48 |         <!-- ! ---------------------------- wrap right box ---------------------------- ! -->
49 |         <div class="wrap-right-box h-100 d-flex align-items-center col-lg-6 col-md-5">
50 |             <div class="container ps-3 pe-0">
51 |                 <h1 class="comming-soon-text">comming soon</h1>
52 |                 <a class="back-to-home" type="button" href="home.html">back to home</a>
53 |             </div>
54 |         </div>
55 |     </div>
56 | 
57 |     <script src="public/content/js/validate-inputs-comming-soon.js"></script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "generator",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Banana021s/css-generator.git"
12 |   },
13 |   "author": "Arash",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/Banana021s/css-generator/issues"
17 |   },
18 |   "homepage": "https://github.com/Banana021s/css-generator#readme",
19 |   "dependencies": {
20 |     "@simonwep/pickr": "^1.8.1",
21 |     "bootstrap": "^5.1.0",
22 |     "bootstrap-icons": "^1.5.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/public/assets/blur-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - blur</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 17 |     <link rel="stylesheet" href="../components/filter-style/filter-style.css">
 18 | </head>
 19 | <body>
 20 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 21 |     <aside class="sidebar d-flex flex-column align-items-center">
 22 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 23 |         <div class="sidebar-dots-box">
 24 |             <div class="sidebar-dot"></div>
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |         </div>
 28 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 29 |         <div class="sidebar-icons-box">
 30 |             <ul class="list-unstyled p-0 m-0 w-100">
 31 |                 <li class="sidebar-icon-item">
 32 |                     <a href="../../home.html" class="sidebar-icon-link">
 33 |                         <i class="bi bi-house"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="sidebar-icon-item">
 37 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 38 |                         <i class="bi bi-github"></i>
 39 |                     </a>
 40 |                 </li>
 41 |                 <li class="sidebar-icon-item d-none">
 42 |                     <span class="sidebar-icon-link">
 43 |                         <i class="bi bi-box-arrow-in-right"></i>
 44 |                     </span>
 45 |                 </li>
 46 |             </ul>
 47 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 48 |                 <li class="sidebar-icon-item-down">
 49 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()" target="_blank" class="sidebar-icon-link">
 50 |                         <i class="bi bi-question-circle"></i>
 51 |                     </a>
 52 |                 </li>
 53 |             </ul>
 54 |         </div>
 55 |     </aside>
 56 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 57 |     <div class="pannel-flash-box">
 58 |         <span><i class="bi bi-box-arrow-left"></i></span>
 59 |     </div>
 60 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 61 |     <div class="wrap">
 62 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 63 |         <div class="wrap-left-box">
 64 |             <!-- ! --------------------------- image container --------------------------- ! -->
 65 |             <div class="image-container">
 66 |                 <div class="image-spliter">
 67 |                     <div class="mover"></div>
 68 |                     <img class="img-left"  src="../content/img/wallpaper/main-image.jpg">
 69 |                     <img class="img-right" src="../content/img/wallpaper/main-image.jpg">
 70 |                 </div>
 71 |             </div>
 72 |         </div>
 73 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 74 |         <div class="wrap-right-box">
 75 |             <div class="pannel p-3">
 76 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 77 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 78 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 79 |                     <span class="header-pannel-heading-icon">
 80 |                         <i class="bi bi-box-arrow-in-right"></i>
 81 |                     </span>
 82 |                 </header>
 83 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 84 |                 <main>
 85 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 86 |                     <section class="col-12 p-0 mt-3">
 87 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 88 |                         <div class="input-group border-bottom">
 89 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 90 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 91 |                         </div>
 92 |                     </section>
 93 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 94 |                     <section class="col-12 property-box p-0 mt-4">
 95 |                         <!-- ! ----------------------------- blur input ------------------------------ ! -->
 96 |                         <div class="input-group border-bottom">
 97 |                             <span class="input-group-text bg-transparent border-0 text-white p-0 properties-icon">
 98 |                                 <i class="bi bi-bricks"></i>
 99 |                             </span>
100 |                             <input type="text" class="form-control blur-inp bg-transparent border-0 shadow-none properties-input pt-0" placeholder="blur">
101 |                         </div>
102 |                         <h6 class="valdiation-inputs-elem blur-validation-elem mt-3 mb-0 text-white"></h6>
103 |                     </section>
104 |                 </main>
105 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
106 |                 <footer class="mt-5">
107 |                     <button class="css-code-btn text-capitalize shadow-lg">css code</button>
108 |                 </footer>
109 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
110 |                 <div class="generate-wrap-box">
111 |                     <div class="generate-box">
112 |                         <div class="code-pannel">
113 |                             <input type="text" class="d-none" id="styleInp">
114 |                         </div>
115 |                         <button class="clipboard-btn">copy to clipboard</button>
116 |                         <button class="close-generate-pannel-btn">close</button>
117 |                     </div>
118 |                 </div>
119 |             </div>
120 |         </div>
121 |     </div>
122 | 
123 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
124 |     <script src="../content/js/tools/blur-tool.js"></script>
125 |     <script src="../components/image-comparison-slider/image-comparison-slider.min.js"></script>
126 |     <script src="../content/js/modules/responsive-pannel.js"></script>
127 | </body>
128 | </html>


--------------------------------------------------------------------------------
/public/assets/font-weight-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - Font Weight</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 17 |     <link rel="stylesheet" href="../content/css/tools/font-weight-tool.css">
 18 | </head>
 19 | <body>
 20 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 21 |     <aside class="sidebar d-flex flex-column align-items-center">
 22 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 23 |         <div class="sidebar-dots-box">
 24 |             <div class="sidebar-dot"></div>
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |         </div>
 28 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 29 |         <div class="sidebar-icons-box">
 30 |             <ul class="list-unstyled p-0 m-0 w-100">
 31 |                 <li class="sidebar-icon-item">
 32 |                     <a href="../../home.html" class="sidebar-icon-link">
 33 |                         <i class="bi bi-house"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="sidebar-icon-item">
 37 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 38 |                         <i class="bi bi-github"></i>
 39 |                     </a>
 40 |                 </li>
 41 |                 <li class="sidebar-icon-item d-none">
 42 |                     <span class="sidebar-icon-link">
 43 |                         <i class="bi bi-box-arrow-in-right"></i>
 44 |                     </span>
 45 |                 </li>
 46 |             </ul>
 47 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 48 |                 <li class="sidebar-icon-item-down">
 49 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" target="_blank" class="sidebar-icon-link">
 50 |                         <i class="bi bi-question-circle"></i>
 51 |                     </a>
 52 |                 </li>
 53 |             </ul>
 54 |         </div>
 55 |     </aside>
 56 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 57 |     <div class="pannel-flash-box">
 58 |         <span><i class="bi bi-box-arrow-left"></i></span>
 59 |     </div>
 60 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 61 |     <div class="wrap">
 62 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 63 |         <div class="wrap-left-box">
 64 |             <!-- ! ------------------------- resizable contaienr ------------------------- ! -->
 65 |             <div class="text-container">
 66 |                 <h1 class="text">
 67 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, delectus.
 68 |                 </h1>
 69 |             </div>
 70 |         </div>
 71 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 72 |         <div class="wrap-right-box">
 73 |             <div class="pannel p-3">
 74 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 75 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 76 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 77 |                     <span class="header-pannel-heading-icon">
 78 |                         <i class="bi bi-box-arrow-in-right"></i>
 79 |                     </span>
 80 |                 </header>
 81 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 82 |                 <main>
 83 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 84 |                     <section class="col-12 p-0 mt-3">
 85 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 86 |                         <div class="input-group border-bottom">
 87 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 88 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 89 |                         </div>
 90 |                     </section>
 91 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 92 |                     <section class="col-12 property-box p-0 mt-4">
 93 |                         <div class="weight-container">
 94 |                             <button class="weight-box d-flex justify-content-between shadow">
 95 |                                 <span>normal</span>
 96 |                                 <span class="weight-box-flash"><i class="bi bi-caret-down"></i></span>
 97 |                             </button>
 98 |                             <div class="weight-menu-box">
 99 |                                 <ul class="list-unstyled p-0 m-0">
100 |                                     <li class="weight-menu-item-box active">normal</li>
101 |                                     <li class="weight-menu-item-box">lighter</li>
102 |                                     <li class="weight-menu-item-box">bold</li>
103 |                                     <li class="weight-menu-item-box">bolder</li>
104 |                                 </ul>
105 |                             </div>
106 |                         </div>
107 |                     </section>
108 |                 </main>
109 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
110 |                 <footer class="mt-5">
111 |                     <button class="css-code-btn text-capitalize mt-4 shadow-lg">css code</button>
112 |                 </footer>
113 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
114 |                 <div class="generate-wrap-box">
115 |                     <div class="generate-box">
116 |                         <div class="code-pannel">
117 |                             <input type="text" class="d-none" id="styleInp">
118 |                         </div>
119 |                         <button class="clipboard-btn">copy to clipboard</button>
120 |                         <button class="close-generate-pannel-btn">close</button>
121 |                     </div>
122 |                 </div>
123 |             </div>
124 |         </div>
125 |     </div>
126 | 
127 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
128 |     <script src="../content/js/tools/font-weight-tool.js"></script>
129 |     <script src="../content/js/modules/responsive-pannel.js"></script>
130 | </body>
131 | </html>


--------------------------------------------------------------------------------
/public/assets/invert-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - Invert</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 17 |     <link rel="stylesheet" href="../components/filter-style/filter-style.css">
 18 | </head>
 19 | <body>
 20 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 21 |     <aside class="sidebar d-flex flex-column align-items-center">
 22 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 23 |         <div class="sidebar-dots-box">
 24 |             <div class="sidebar-dot"></div>
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |         </div>
 28 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 29 |         <div class="sidebar-icons-box">
 30 |             <ul class="list-unstyled p-0 m-0 w-100">
 31 |                 <li class="sidebar-icon-item">
 32 |                     <a href="../../home.html" class="sidebar-icon-link">
 33 |                         <i class="bi bi-house"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="sidebar-icon-item">
 37 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 38 |                         <i class="bi bi-github"></i>
 39 |                     </a>
 40 |                 </li>
 41 |                 <li class="sidebar-icon-item d-none">
 42 |                     <span class="sidebar-icon-link">
 43 |                         <i class="bi bi-box-arrow-in-right"></i>
 44 |                     </span>
 45 |                 </li>
 46 |             </ul>
 47 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 48 |                 <li class="sidebar-icon-item-down">
 49 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert()" target="_blank" class="sidebar-icon-link">
 50 |                         <i class="bi bi-question-circle"></i>
 51 |                     </a>
 52 |                 </li>
 53 |             </ul>
 54 |         </div>
 55 |     </aside>
 56 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 57 |     <div class="pannel-flash-box">
 58 |         <span><i class="bi bi-box-arrow-left"></i></span>
 59 |     </div>
 60 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 61 |     <div class="wrap">
 62 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 63 |         <div class="wrap-left-box">
 64 |             <!-- ! --------------------------- image container --------------------------- ! -->
 65 |             <div class="image-container">
 66 |                 <div class="image-spliter">
 67 |                     <div class="mover"></div>
 68 |                     <img class="img-left"  src="../content/img/wallpaper/main-image.jpg">
 69 |                     <img class="img-right" src="../content/img/wallpaper/main-image.jpg">
 70 |                 </div>
 71 |             </div>
 72 |         </div>
 73 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 74 |         <div class="wrap-right-box">
 75 |             <div class="pannel p-3">
 76 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 77 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 78 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 79 |                     <span class="header-pannel-heading-icon">
 80 |                         <i class="bi bi-box-arrow-in-right"></i>
 81 |                     </span>
 82 |                 </header>
 83 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 84 |                 <main>
 85 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 86 |                     <section class="col-12 p-0 mt-3">
 87 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 88 |                         <div class="input-group border-bottom">
 89 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 90 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 91 |                         </div>
 92 |                     </section>
 93 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 94 |                     <section class="col-12 property-box p-0 mt-4">
 95 |                         <!-- ! ----------------------------- invert inp ------------------------------ ! -->
 96 |                         <div class="input-group border-bottom">
 97 |                             <span class="input-group-text bg-transparent border-0 text-white p-0 properties-icon">
 98 |                                 <i class="bi bi-symmetry-vertical"></i>
 99 |                             </span>
100 |                             <input type="text" class="form-control invert-inp bg-transparent border-0 shadow-none properties-input pt-0" placeholder="hue-rotate">
101 |                         </div>
102 |                         <h6 class="valdiation-inputs-elem invert-validation-elem mt-3 mb-0 text-white"></h6>
103 |                     </section>
104 |                 </main>
105 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
106 |                 <footer class="mt-5">
107 |                     <button class="css-code-btn text-capitalize shadow-lg">css code</button>
108 |                 </footer>
109 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
110 |                 <div class="generate-wrap-box">
111 |                     <div class="generate-box">
112 |                         <div class="code-pannel">
113 |                             <input type="text" class="d-none" id="styleInp">
114 |                         </div>
115 |                         <button class="clipboard-btn">copy to clipboard</button>
116 |                         <button class="close-generate-pannel-btn">close</button>
117 |                     </div>
118 |                 </div>
119 |             </div>
120 |         </div>
121 |     </div>
122 | 
123 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
124 |     <script src="../content/js/tools/invert-tool.js"></script>
125 |     <script src="../components/image-comparison-slider/image-comparison-slider.min.js"></script>
126 |     <script src="../content/js/modules/responsive-pannel.js"></script>
127 | </body>
128 | </html>


--------------------------------------------------------------------------------
/public/assets/line-height-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - Line Height</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 17 |     <link rel="stylesheet" href="../content/css/tools/line-height-tool.css">
 18 | </head>
 19 | <body>
 20 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 21 |     <aside class="sidebar d-flex flex-column align-items-center">
 22 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 23 |         <div class="sidebar-dots-box">
 24 |             <div class="sidebar-dot"></div>
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |         </div>
 28 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 29 |         <div class="sidebar-icons-box">
 30 |             <ul class="list-unstyled p-0 m-0 w-100">
 31 |                 <li class="sidebar-icon-item">
 32 |                     <a href="../../home.html" class="sidebar-icon-link">
 33 |                         <i class="bi bi-house"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="sidebar-icon-item">
 37 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 38 |                         <i class="bi bi-github"></i>
 39 |                     </a>
 40 |                 </li>
 41 |                 <li class="sidebar-icon-item d-none">
 42 |                     <span class="sidebar-icon-link">
 43 |                         <i class="bi bi-box-arrow-in-right"></i>
 44 |                     </span>
 45 |                 </li>
 46 |             </ul>
 47 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 48 |                 <li class="sidebar-icon-item-down">
 49 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" target="_blank" class="sidebar-icon-link">
 50 |                         <i class="bi bi-question-circle"></i>
 51 |                     </a>
 52 |                 </li>
 53 |             </ul>
 54 |         </div>
 55 |     </aside>
 56 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 57 |     <div class="pannel-flash-box">
 58 |         <span><i class="bi bi-box-arrow-left"></i></span>
 59 |     </div>
 60 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 61 |     <div class="wrap">
 62 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 63 |         <div class="wrap-left-box">
 64 |             <!-- ! ------------------------- resizable contaienr ------------------------- ! -->
 65 |             <div class="text-container">
 66 |                 <h1 class="text">
 67 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, ipsam?
 68 |                 </h1>
 69 |             </div>
 70 |         </div>
 71 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 72 |         <div class="wrap-right-box">
 73 |             <div class="pannel p-3">
 74 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 75 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 76 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 77 |                     <span class="header-pannel-heading-icon">
 78 |                         <i class="bi bi-box-arrow-in-right"></i>
 79 |                     </span>
 80 |                 </header>
 81 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 82 |                 <main>
 83 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 84 |                     <section class="col-12 p-0 mt-3">
 85 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 86 |                         <div class="input-group border-bottom">
 87 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 88 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 89 |                         </div>
 90 |                     </section>
 91 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 92 |                     <section class="col-12 property-box p-0 mt-4">
 93 |                         <!-- ! --------------------------- line height inp --------------------------- ! -->
 94 |                         <h5 class="text-white mb-3 pt-1 text-capitalize">Calculated based on pixel</h4>
 95 |                         <div class="input-group border-bottom">
 96 |                             <span class="input-group-text bg-transparent border-0 text-white p-0 properties-icon">
 97 |                                 <i class="bi bi-bar-chart-steps"></i>
 98 |                             </span>
 99 |                             <input type="text" class="form-control line-height-inp bg-transparent border-0 shadow-none properties-input pt-0" placeholder="line height">
100 |                         </div>
101 |                         <h6 class="valdiation-inputs-elem line-height-validation-elem mt-3 mb-0 text-white"></h6>
102 |                     </section>
103 |                 </main>
104 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
105 |                 <footer class="mt-4">
106 |                     <button class="css-code-btn text-capitalize shadow-lg">css code</button>
107 |                 </footer>
108 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
109 |                 <div class="generate-wrap-box">
110 |                     <div class="generate-box">
111 |                         <div class="code-pannel">
112 |                             <input type="text" class="d-none" id="styleInp">
113 |                         </div>
114 |                         <button class="clipboard-btn">copy to clipboard</button>
115 |                         <button class="close-generate-pannel-btn">close</button>
116 |                     </div>
117 |                 </div>
118 |             </div>
119 |         </div>
120 |     </div>
121 | 
122 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
123 |     <script src="../content/js/tools/line-height-tool.js"></script>
124 |     <script src="../content/js/modules/responsive-pannel.js"></script> 
125 | </body>
126 | </html>


--------------------------------------------------------------------------------
/public/assets/sepia-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - Sepia</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 17 |     <link rel="stylesheet" href="../components/filter-style/filter-style.css">
 18 | </head>
 19 | <body>
 20 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 21 |     <aside class="sidebar d-flex flex-column align-items-center">
 22 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 23 |         <div class="sidebar-dots-box">
 24 |             <div class="sidebar-dot"></div>
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |         </div>
 28 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 29 |         <div class="sidebar-icons-box">
 30 |             <ul class="list-unstyled p-0 m-0 w-100">
 31 |                 <li class="sidebar-icon-item">
 32 |                     <a href="../../home.html" class="sidebar-icon-link">
 33 |                         <i class="bi bi-house"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="sidebar-icon-item">
 37 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 38 |                         <i class="bi bi-github"></i>
 39 |                     </a>
 40 |                 </li>
 41 |                 <li class="sidebar-icon-item d-none">
 42 |                     <span class="sidebar-icon-link">
 43 |                         <i class="bi bi-box-arrow-in-right"></i>
 44 |                     </span>
 45 |                 </li>
 46 |             </ul>
 47 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 48 |                 <li class="sidebar-icon-item-down">
 49 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia()" target="_blank" class="sidebar-icon-link">
 50 |                         <i class="bi bi-question-circle"></i>
 51 |                     </a>
 52 |                 </li>
 53 |             </ul>
 54 |         </div>
 55 |     </aside>
 56 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 57 |     <div class="pannel-flash-box">
 58 |         <span><i class="bi bi-box-arrow-left"></i></span>
 59 |     </div>
 60 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 61 |     <div class="wrap">
 62 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 63 |         <div class="wrap-left-box">
 64 |             <!-- ! --------------------------- image container --------------------------- ! -->
 65 |             <div class="image-container">
 66 |                 <div class="image-spliter">
 67 |                     <div class="mover"></div>
 68 |                     <img class="img-left"  src="../content/img/wallpaper/main-image.jpg">
 69 |                     <img class="img-right" src="../content/img/wallpaper/main-image.jpg">
 70 |                 </div>
 71 |             </div>
 72 |         </div>
 73 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 74 |         <div class="wrap-right-box">
 75 |             <div class="pannel p-3">
 76 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 77 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 78 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 79 |                     <span class="header-pannel-heading-icon">
 80 |                         <i class="bi bi-box-arrow-in-right"></i>
 81 |                     </span>
 82 |                 </header>
 83 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 84 |                 <main>
 85 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 86 |                     <section class="col-12 p-0 mt-3">
 87 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 88 |                         <div class="input-group border-bottom">
 89 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 90 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 91 |                         </div>
 92 |                     </section>
 93 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 94 |                     <section class="col-12 property-box p-0 mt-4">
 95 |                         <!-- ! ------------------------------ sepia inp ------------------------------ ! -->
 96 |                         <div class="input-group border-bottom">
 97 |                             <span class="input-group-text bg-transparent border-0 text-white p-0 properties-icon">
 98 |                                 <i class="bi bi-thermometer-sun"></i>
 99 |                             </span>
100 |                             <input type="text" class="form-control sepia-inp bg-transparent border-0 shadow-none properties-input pt-0" placeholder="sepia">
101 |                         </div>
102 |                         <h6 class="valdiation-inputs-elem sepia-validation-elem mt-3 mb-0 text-white"></h6>
103 |                     </section>
104 |                 </main>
105 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
106 |                 <footer class="mt-5">
107 |                     <button class="css-code-btn text-capitalize shadow-lg">css code</button>
108 |                 </footer>
109 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
110 |                 <div class="generate-wrap-box">
111 |                     <div class="generate-box">
112 |                         <div class="code-pannel">
113 |                             <input type="text" class="d-none" id="styleInp">
114 |                         </div>
115 |                         <button class="clipboard-btn">copy to clipboard</button>
116 |                         <button class="close-generate-pannel-btn">close</button>
117 |                     </div>
118 |                 </div>
119 |             </div>
120 |         </div>
121 |     </div>
122 | 
123 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
124 |     <script src="../content/js/tools/sepia-tool.js"></script>
125 |     <script src="../components/image-comparison-slider/image-comparison-slider.min.js"></script>
126 |     <script src="../content/js/modules/responsive-pannel.js"></script>
127 | </body>
128 | </html>


--------------------------------------------------------------------------------
/public/assets/text-color-tool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Css Generator - Text Color</title>
  8 | 
  9 |     <!-- ! ------------------------------ fav icon ------------------------------- ! -->
 10 |     <link rel="icon" href="../content/img/css-img/css.png" sizes="any">
 11 | 
 12 |     <!-- ! -------------------------------- links -------------------------------- ! -->
 13 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
 14 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 15 |     <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
 16 |     <link rel="stylesheet" href="../../node_modules/@simonwep/pickr/dist/themes/classic.min.css">
 17 |     <link rel="stylesheet" href="../content/css/generate-pannel.css">
 18 |     <link rel="stylesheet" href="../content/css/tools/text-color-tool.css">
 19 | </head>
 20 | <body>
 21 |     <!-- ! ------------------------------- sidebar ------------------------------- ! -->
 22 |     <aside class="sidebar d-flex flex-column align-items-center">
 23 |         <!-- ! ---------------------------- sidebar dots ----------------------------- ! -->
 24 |         <div class="sidebar-dots-box">
 25 |             <div class="sidebar-dot"></div>
 26 |             <div class="sidebar-dot"></div>
 27 |             <div class="sidebar-dot"></div>
 28 |         </div>
 29 |         <!-- ! ---------------------------- sidebar icons ---------------------------- ! -->
 30 |         <div class="sidebar-icons-box">
 31 |             <ul class="list-unstyled p-0 m-0 w-100">
 32 |                 <li class="sidebar-icon-item">
 33 |                     <a href="../../home.html" class="sidebar-icon-link">
 34 |                         <i class="bi bi-house"></i>
 35 |                     </a>
 36 |                 </li>
 37 |                 <li class="sidebar-icon-item">
 38 |                     <a href="https://github.com/Banana021s/css-generator" target="_blank" class="sidebar-icon-link">
 39 |                         <i class="bi bi-github"></i>
 40 |                     </a>
 41 |                 </li>
 42 |                 <li class="sidebar-icon-item d-none">
 43 |                     <span class="sidebar-icon-link">
 44 |                         <i class="bi bi-box-arrow-in-right"></i>
 45 |                     </span>
 46 |                 </li>
 47 |             </ul>
 48 |             <ul class="sidebar-icons-down-box list-unstyled p-0 m-0 w-100">
 49 |                 <li class="sidebar-icon-item-down">
 50 |                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" class="sidebar-icon-link">
 51 |                         <i class="bi bi-question-circle"></i>
 52 |                     </a>
 53 |                 </li>
 54 |             </ul>
 55 |         </div>
 56 |     </aside>
 57 |     <!-- ! ---------------------------- pannel flash ----------------------------- ! -->
 58 |     <div class="pannel-flash-box">
 59 |         <span><i class="bi bi-box-arrow-left"></i></span>
 60 |     </div>
 61 |     <!-- ! -------------------------------- wrap --------------------------------- ! -->
 62 |     <div class="wrap">
 63 |         <!-- ! ---------------------------- wrap left box ---------------------------- ! -->
 64 |         <div class="wrap-left-box">
 65 |             <!-- ! ------------------------- resizable contaienr ------------------------- ! -->
 66 |             <div class="text-container">
 67 |                 <h1 class="text">CSS3 generator</h1>
 68 |             </div>
 69 |         </div>
 70 |         <!-- ! --------------------------- wrap right box ---------------------------- ! -->
 71 |         <div class="wrap-right-box">
 72 |             <div class="pannel p-3">
 73 |                 <!-- ! ---------------------------- header pannel ---------------------------- ! -->
 74 |                 <header class="header-pannel d-flex justify-content-between align-items-center">
 75 |                     <h3 class="header-pannel-heading p-0 m-0">pannel</h3>
 76 |                     <span class="header-pannel-heading-icon">
 77 |                         <i class="bi bi-box-arrow-in-right"></i>
 78 |                     </span>
 79 |                 </header>
 80 |                 <!-- ! ----------------------------- main pannel ----------------------------- ! -->
 81 |                 <main>
 82 |                     <!-- ! ---------------------- element class name input ----------------------- ! -->
 83 |                     <section class="col-12 p-0 mt-3">
 84 |                         <h6 class="text-white text-capitalize mb-2">please complete the field below. You are allowed to enter up to 30 letters</h6>
 85 |                         <div class="input-group border-bottom">
 86 |                             <span class="input-group-text element-class-name-text-icon border-0 bg-transparent p-0"><i class="bi bi-cursor-text"></i></span>
 87 |                             <input class="form-control element-class-name-input bg-transparent shadow-none border-0" type="text" placeholder="type element class name">
 88 |                         </div>
 89 |                     </section>
 90 |                     <!-- ! --------------------------- properties box ---------------------------- ! -->
 91 |                     <section class="col-12 property-box p-0 mt-4">
 92 |                         <!-- ! ---------------------------- color picker ----------------------------- ! -->
 93 |                         <div class="col-12 p-0 m-0">
 94 |                             <div class="color-picker-box d-flex align-items-center justify-content-between">
 95 |                                 <div class="d-flex align-items-center">
 96 |                                     <button class="color-picker"></button>
 97 |                                     <span class="ms-3 choose-color-picker-text">Fill</span>
 98 |                                 </div>
 99 |                             </div>
100 |                         </div>
101 |                     </section>
102 |                 </main>
103 |                 <!-- ! ---------------------------- footer pannel ---------------------------- ! -->
104 |                 <footer class="mt-3">
105 |                     <button class="css-code-btn text-capitalize shadow-lg mt-5">css code</button>
106 |                 </footer>
107 |                 <!-- ! ---------------------------- generate-box ----------------------------- ! -->
108 |                 <div class="generate-wrap-box">
109 |                     <div class="generate-box">
110 |                         <div class="code-pannel">
111 |                             <input type="text" class="d-none" id="styleInp">
112 |                         </div>
113 |                         <button class="clipboard-btn">copy to clipboard</button>
114 |                         <button class="close-generate-pannel-btn">close</button>
115 |                     </div>
116 |                 </div>
117 |             </div>
118 |         </div>
119 |     </div>
120 | 
121 |     <!-- ! ------------------------------- scripts ------------------------------- ! -->
122 |     <script type="module" src="../content/js/tools/text-color-tool.js"></script>
123 |     <script src="../../node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
124 |     <script type="module" src="../content/js/modules/pickr.js"></script>
125 |     <script src="../content/js/modules/responsive-pannel.js"></script>
126 | </body>
127 | </html>


--------------------------------------------------------------------------------
/public/components/aside/aside.css:
--------------------------------------------------------------------------------
  1 | @import url(../../components/custom/custom.css);
  2 | .sidebar {
  3 |     position: fixed;
  4 |     top: 0;
  5 |     left: 0;
  6 |     width: 100px;
  7 |     height: 100%;
  8 |     background: var(--sidebar-gradient);
  9 |     box-shadow: 0 0 5px var(--dark-black);
 10 |     z-index: 9999;
 11 |     overflow: hidden;
 12 | }
 13 | .sidebar::before {
 14 |     content: '';
 15 |     position: absolute;
 16 |     top: 0;
 17 |     left: 0;
 18 |     width: 100%;
 19 |     height: 100px;
 20 |     background: var(--prety-blue);
 21 |     clip-path: polygon(100% 13%, 100% 39%, 0 78%, 0 51%);
 22 |     animation: sidebar 1.5s alternate forwards;
 23 |     opacity: 0;
 24 | }
 25 | @keyframes sidebar {
 26 |     0% {
 27 |         top: -50%;
 28 |         opacity: 0;
 29 |     }
 30 |     1% {
 31 |         opacity: 1;
 32 |     }
 33 |     100% {
 34 |         top: 100%;
 35 |         opacity: 1;
 36 |     }
 37 | }
 38 | /* ! ------------------------------ sidebar dots ------------------------------ ! */
 39 | .sidebar-dots-box {
 40 |     margin-top: 20px;
 41 |     display: flex;
 42 | }
 43 | .sidebar-dots-box .sidebar-dot {
 44 |     width: 12px;
 45 |     height: 12px;
 46 |     border-radius: 100%;
 47 | }
 48 | .sidebar-dots-box .sidebar-dot:nth-child(1) {
 49 |     background-color: var(--red-dot);
 50 | }
 51 | .sidebar-dots-box .sidebar-dot:nth-child(2) {
 52 |     background-color: var(--yellow-dot);
 53 | }
 54 | .sidebar-dots-box .sidebar-dot:nth-child(3) {
 55 |     background-color: var(--green-dot);
 56 | }
 57 | .sidebar-dots-box .sidebar-dot:not(:first-child) {
 58 |     margin-left: 6px;
 59 | }
 60 | /* ! ------------------------------ sidebar icons ----------------------------- ! */
 61 | .sidebar-icons-box {
 62 |     margin-top: 18px;
 63 | }
 64 | .sidebar-icon-item:not(:first-child) {
 65 |     margin-top: 15px;
 66 | }
 67 | .sidebar-icon-link {
 68 |     font-size: 1.5rem;
 69 |     color: var(--minimal-white) !important;
 70 | }
 71 | /* ! ------------------------- sidebar-icons-down-box ------------------------- ! */
 72 | .sidebar-icons-down-box {
 73 |     position: absolute ;
 74 |     bottom: 20px ;
 75 |     left: 0 ;
 76 |     display: flex ;
 77 |     flex-direction: column;
 78 |     align-items: center;
 79 | }
 80 | /* ! ------------------------------- meida query ------------------------------ ! */
 81 | @media screen and ( max-width : 1070px ) {
 82 |     .sidebar-icon-item:nth-child(3) {
 83 |         display: block !important;
 84 |         cursor: pointer;
 85 |         transform: scale(1.1);
 86 |     }
 87 | }
 88 | @media screen and ( max-width : 767px ) {
 89 |     .sidebar {
 90 |         top: 0;
 91 |         left: 0;
 92 |         width: 100% !important;
 93 |         height: 80px;
 94 |         flex-direction: row !important;
 95 |         justify-content: start;
 96 |     }
 97 |     .sidebar::before {
 98 |         animation: none;
 99 |         display: none;
100 |     }
101 |     .sidebar-icons-box {
102 |         display: flex;
103 |         justify-content: space-between;
104 |         width: 100%;
105 |         margin-top: 0;
106 |     }
107 |     .sidebar-icons-box ul:nth-child(1) {
108 |         display: flex;
109 |     }
110 |     .sidebar-icons-box ul:nth-child(1) .sidebar-icon-item {
111 |         margin-top: 0 ;
112 |     }
113 |     .sidebar-icons-box ul:nth-child(1) .sidebar-icon-item:not(:last-child) {
114 |         margin-left: 20px;
115 |     }
116 |     .sidebar-icon-item:nth-child(3) {
117 |         margin-left: 20px;
118 |     }
119 |     .sidebar-dots-box {
120 |         display: none;
121 |     }
122 |     .sidebar-icons-down-box {
123 |         position: static ;
124 |         flex-direction: row ;
125 |         justify-content: end;
126 |         margin-right: 20px !important;
127 |     }
128 | }


--------------------------------------------------------------------------------
/public/components/custom/custom.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
 2 | :root {
 3 |     --dark-black : #0C0910;
 4 |     --matte-black : #171717 ;
 5 |     --minimal-dark : #1C1C23 ;
 6 |     --one-c-dark : #1C1C27 ;
 7 | 
 8 |     --dark-blue : #3F3FCB ;
 9 |     --minimal-blue : #5151CD ;
10 |     --prety-blue : rgb(102, 0, 255) ;
11 |     --black-blue : #00082D ;
12 | 
13 |     --light-purple : #9B9BEC ;
14 |     --minimal-purple : #7777E1 ;
15 | 
16 |     --white : #FFFFFF;
17 |     --minimal-white : #EBEBEB ;
18 |     --gray : #BFBFBF ;
19 |     --d-white : #DDDDDD;
20 |     --dark-gray : #53535C;
21 | 
22 |     --generate-pannel : #2E2E42;
23 | 
24 |     --red-dot : #D90007 ;
25 |     --yellow-dot : #E8E100 ;
26 |     --green-dot : #0ED800 ;
27 | 
28 |     --home-gradient : linear-gradient(45deg, var(--dark-black), #1C1820);
29 |     --sidebar-gradient : linear-gradient(to bottom, #1C1C27, #1F1F27);
30 | 
31 |     --light-border : #403F3F ; 
32 |     --tool-border  :  rgba(102, 0, 255, 0.3) ;
33 |     --tool-progress : rgba(102, 0, 255, 0.6) ;
34 |     
35 |     --tool-shadow : rgba(0, 0, 0, 0.6);
36 | }
37 | body {
38 |     font-family: 'Montserrat', sans-serif;
39 | }
40 | * {
41 |     user-select: none;
42 | }
43 | html {
44 |     overflow-x: hidden ;
45 | }


--------------------------------------------------------------------------------
/public/components/filter-style/filter-style.css:
--------------------------------------------------------------------------------
  1 | @import url(../../components/aside/aside.css);
  2 | @import url(../image-comparison-slider/image-comparison-slider.css);
  3 | /* ! ---------------------------------- body ---------------------------------- ! */
  4 | body {
  5 |     background : var(--home-gradient) ;
  6 |     position: relative;
  7 |     display: flex;
  8 |     overflow-x: hidden;
  9 |     height: 100vh;
 10 | }
 11 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 12 | .wrap {
 13 |     display: flex;
 14 |     width: 100%;
 15 |     height: 100%;
 16 | }
 17 | .wrap-left-box {
 18 |     width: 100%;
 19 |     height: 100%;
 20 |     display: flex;
 21 |     align-items: center;
 22 |     justify-content: center;
 23 |     margin-left: 100px;
 24 | }
 25 | .wrap-right-box {
 26 |     width: 500px;
 27 |     width: 500px ;
 28 |     height: 100%;
 29 |     z-index: 9999;
 30 |     transition: all 0.4s;
 31 |     transform: translateX(100%);
 32 | }
 33 | .wrap-right-box.active {
 34 |     visibility: visible;
 35 |     opacity: 1;
 36 |     transform: translateX(0);
 37 | }
 38 | .wrap::before {
 39 |     content: '';
 40 |     position: absolute;
 41 |     top: 0;
 42 |     left: 0;
 43 |     width: 100%;
 44 |     height: 100%;
 45 |     opacity: 0;
 46 |     background: var(--dark-black);
 47 |     transition: all 0.4s;
 48 |     z-index: 20;
 49 |     visibility: hidden;
 50 |     opacity: 0;
 51 | }
 52 | .wrap.active::before {
 53 |     visibility: visible;
 54 |     opacity: 0.8;
 55 | }
 56 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 57 | .pannel-flash-box {
 58 |     position: absolute;
 59 |     top: 50%;
 60 |     right: 50px;
 61 |     border-radius: 100%;
 62 |     display: flex;
 63 |     align-items: center;
 64 |     justify-content: center;
 65 |     width: 60px;
 66 |     height: 60px;
 67 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 68 |     z-index: 1000;
 69 |     transform: translateY(-50%);
 70 |     display: none;
 71 |     color: var(--white);
 72 |     margin-right: -5px;
 73 |     font-size: 1.3rem;
 74 |     cursor: pointer;
 75 | }
 76 | /* ! ----------------------------- image container ---------------------------- ! */
 77 | .image-container {
 78 |     width: 75%;
 79 |     border-radius: 5px;
 80 |     box-shadow:  5px 5px 10px #0d0b10,
 81 |              -5px -5px 10px #1d1922;
 82 |     overflow: hidden;
 83 |     border: 1px solid var(--dark-gray);
 84 | }
 85 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 86 | .pannel {
 87 |     position: relative;
 88 |     width: 100%;
 89 |     height: 100%;
 90 |     background: var(--sidebar-gradient);
 91 |     border-left: 1px solid var(--light-border);
 92 |     overflow-x: hidden;
 93 |     overflow-y: auto;
 94 |     z-index: 9999;
 95 | }
 96 | .pannel::before {
 97 |     content: '';
 98 |     position: absolute;
 99 |     top: 0;
100 |     right: 0;
101 |     width: 100%;
102 |     height: 530px;
103 |     background-image: url(../../content/img/pannel/pannel_back/pannel_back.png);
104 |     background-position: top;
105 |     background-size: contain;
106 |     background-repeat: no-repeat;
107 |     z-index: -1;
108 | }
109 | /* ! ------------------------------ pannel header ----------------------------- ! */
110 | .header-pannel-heading {
111 |     font-weight: bolder;
112 |     text-transform: capitalize;
113 |     color: var(--white);
114 |     font-size: 25px;
115 | }
116 | .header-pannel-heading-icon {
117 |     color: var(--white);
118 |     cursor: pointer;
119 |     font-size: 1.5rem;
120 | }
121 | /* ! ------------------------ element class name input ------------------------ ! */
122 | .element-class-name-input {
123 |     color: var(--white) !important;
124 | }
125 | .element-class-name-input::placeholder {
126 |     color: var(--gray) !important;
127 |     text-transform: capitalize;
128 |     font-weight: bolder;
129 | }
130 | .element-class-name-text-icon {
131 |     color: var(--white);
132 | }
133 | /* ! ----------------------------- properties box ----------------------------- ! */
134 | .property-box {
135 |     width: 318px;
136 |     overflow: hidden;
137 | }
138 | .properties-input {
139 |     color: var(--white) !important;
140 | }
141 | .properties-input::placeholder {
142 |     color: var(--gray) !important;
143 |     text-transform: capitalize;
144 | }
145 | /* ! ------------------------------ footer pannel ----------------------------- ! */
146 | .css-code-btn {
147 |     width: 100%;
148 |     border-radius: 5px;
149 |     background-color: var(--prety-blue);
150 |     color: var(--white);
151 |     padding: 10px 0;
152 |     font-size: 17px;
153 |     border: 1px solid var(--dark-black);
154 | }
155 | /* ! ------------------------------ generate box ------------------------------ ! */
156 | .generate-wrap-box {
157 |     position: absolute;
158 |     bottom: 0;
159 |     right: 0;
160 |     left: 0;
161 |     width: 100%;
162 |     height: 100%;
163 |     visibility: hidden;
164 | }
165 | .generate-wrap-box.active {
166 |     visibility: visible;
167 | }
168 | .generate-wrap-box::before {
169 |     content: '';
170 |     position: absolute;
171 |     inset: 0;
172 |     width: 100%;
173 |     height: 100%;
174 |     background-color: var(--one-c-dark);
175 |     opacity: 0.5;
176 | }
177 | .generate-box {
178 |     position: absolute;
179 |     bottom: 0;
180 |     left: 0;
181 |     right: 0;
182 |     width: 100%;
183 |     height: 0;
184 |     background: var(--one-c-dark);
185 |     z-index: 10;
186 |     transition: 0.5s;
187 | }
188 | .generate-wrap-box.active .generate-box {
189 |     height: 73%;
190 | }
191 | /* ! ------------------------------- media query ------------------------------ ! */
192 | @media screen and ( max-width : 1070px ) {
193 |     .wrap-right-box {
194 |         position: fixed;
195 |         top: 0;
196 |         right: 0;
197 |         width: 350px;
198 |         transform: translateX(100%);
199 |         visibility: hidden;
200 |         opacity: 0;
201 |     }
202 | }
203 | @media screen and ( min-width : 1070px ) {
204 |     .pannel-flash-box {
205 |         display: flex;
206 |     }
207 |     .wrap-right-box {
208 |         transform: translateX(0);
209 |     }
210 |     .wrap::before {
211 |         visibility: hidden !important;
212 |         opacity: 0 !important;
213 |     }
214 | }
215 | @media screen and ( max-width : 767px ) {
216 |     .wrap-left-box {
217 |         margin: 0;
218 |         padding-top: 50px;
219 |         overflow: hidden !important;
220 |     }
221 | }
222 | @media screen and ( max-width : 575px ) {
223 |     .image-container {
224 |         width: 90%;
225 |     }
226 | }
227 | @media screen and ( max-width : 500px ) {
228 |     .wrap-right-box {
229 |         width: 100% !important;
230 |     }
231 | }
232 | @media screen and ( max-height : 500px ) {
233 |     body {
234 |         height: auto !important;
235 |     }
236 |     .wrap {
237 |         height: 130vh;
238 |     }
239 | }


--------------------------------------------------------------------------------
/public/components/image-comparison-slider/image-comparison-slider.css:
--------------------------------------------------------------------------------
 1 | img {
 2 |   width: 100%;
 3 |   vertical-align: middle;
 4 | }
 5 | 
 6 | .image-spliter,
 7 | img,
 8 | .mover {
 9 |   overflow: hidden;
10 |   -webkit-touch-callout: none;
11 |     -webkit-user-select: none;
12 |      -khtml-user-select: none;
13 |        -moz-user-select: none;
14 |         -ms-user-select: none;
15 |             user-select: none;
16 | }
17 | 
18 | .image-spliter {
19 |   position: relative;
20 | }
21 | 
22 | .img-left {
23 |   position: absolute;
24 |   top: 0;
25 |   left:0;
26 | }
27 | 
28 | .mover {
29 |   position:absolute;
30 |   width: 200px;
31 |   height: 100%;
32 |   top: 0;
33 |   left:0;
34 |   z-index: 10;
35 | }
36 | .mover:before,
37 | .mover:after {
38 |   position:absolute;
39 |   left:50%;
40 |   content: "";
41 |   background: var(--white);
42 |   cursor: -webkit-grab;
43 |   cursor: grab;
44 | }
45 | 
46 | .mover:before {
47 |   top: 0;
48 |   transform:translateX(-50%);
49 |   width: 1px;
50 |   height: 100%;
51 | }
52 | .mover:after {
53 |   top: 50%;
54 |   transform:translate(-50%, -50%);
55 |   width: 5px;
56 |   height: 33%;
57 |   border-radius: 5px;
58 | }
59 | 


--------------------------------------------------------------------------------
/public/components/image-comparison-slider/image-comparison-slider.min.js:
--------------------------------------------------------------------------------
1 | !function(){for(var t=document.querySelectorAll(".image-spliter .mover"),e=t.length;e--;){var n=t[e].getBoundingClientRect().width,i=t[e].nextElementSibling,l=i.getBoundingClientRect().width;i.getBoundingClientRect().height;t[e].style.left=l/2-n/2+"px",i.style.clip="rect(0px, "+l/2+"px, 999px, 0px)";var s,c=0;t[e].addEventListener("mousedown",function(t){s=t.clientX,c=1}),t[e].addEventListener("mouseup",function(t){c=0}),t[e].addEventListener("mouseout",function(t){c=0}),t[e].addEventListener("touchstart",function(t){s=t.touches[0].clientX,c=1}),t[e].addEventListener("touchend",function(t){c=0}),t[e].addEventListener("mousemove",function(t){c&&(this.style.left=parseInt(this.style.left)+(event.clientX-s)+"px",s=event.clientX,this.nextElementSibling.style.clip="rect(0px, "+(this.getBoundingClientRect().width/2+parseInt(this.style.left))+"px, "+this.getBoundingClientRect().height+"px, 0px)")}),t[e].addEventListener("touchmove",function(t){c&&(this.style.left=parseInt(this.style.left)+(t.touches[0].clientX-s)+"px",s=t.touches[0].clientX,this.nextElementSibling.style.clip="rect(0px, "+(this.getBoundingClientRect().width/2+parseInt(this.style.left))+"px, "+this.getBoundingClientRect().height+"px, 0px)")})}window.addEventListener("resize",function(t){for(var e=document.querySelectorAll(".image-spliter .mover"),n=e.length;n--;){var i=e[n].getBoundingClientRect().width,l=e[n].nextElementSibling,s=l.getBoundingClientRect().width,c=l.getBoundingClientRect().height;e[n].style.left=s/2-i/2+"px",l.style.clip="rect(0px, "+s/2+"px, "+c+"px, 0px)"}})}();
2 | 


--------------------------------------------------------------------------------
/public/content/css/comming-soon.css:
--------------------------------------------------------------------------------
  1 | 
  2 | @import url(../../components/custom/custom.css);
  3 | 
  4 | body {
  5 |     background : var(--home-gradient);
  6 |     position: relative;
  7 |     height: 100vh;
  8 | }
  9 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 10 | .wrap {
 11 |     height: 100%;
 12 | }
 13 | /* ! ------------------------------ wrap left box ----------------------------- ! */
 14 | .wrap-left-box {
 15 |     position: relative;
 16 |     background-image: url(../../content/img/css-img/css3.jpg);
 17 |     background-repeat: no-repeat;
 18 |     background-size: cover;
 19 |     background-position: center;
 20 | }
 21 | .wrap-left-box::before {
 22 |     content: '';
 23 |     position: absolute;
 24 |     inset: 0;
 25 |     background: var(--dark-black);
 26 |     opacity: 0.7;
 27 |     z-index: 0;
 28 | }
 29 | /* ! -------------------------------- form wrap ------------------------------- ! */
 30 | .form-wrap {
 31 |     border: 1px solid var(--light-border);
 32 |     padding: 25px 20px;
 33 |     z-index: 999;
 34 |     border-radius: 5px;
 35 |     background: var(--home-gradient);
 36 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 37 | }
 38 | .form-wrap-title {
 39 |     font-size: 1.5rem;
 40 | }
 41 | .user-name-inp , .email-inp {
 42 |     background: transparent !important;
 43 |     border: 0 !important;
 44 |     box-shadow: none !important;
 45 |     padding: 10px 0;
 46 |     color: var(--white) !important;
 47 | }
 48 | .input-group-text {
 49 |     background: transparent;
 50 |     border: 0 !important;
 51 |     color: var(--white) ;
 52 | }
 53 | .validation-text {
 54 |     font-size: 1rem;
 55 |     color: var(--light-purple);
 56 |     text-transform: capitalize;
 57 | }
 58 | .send-btn {
 59 |     width: 100%;
 60 |     border: none;
 61 |     outline: none;
 62 |     padding: 7px 0;
 63 |     border-radius: 3px;
 64 |     background-color: var(--prety-blue);
 65 |     color: var(--white);
 66 |     font-size: 1.3rem;
 67 |     text-transform: capitalize;
 68 | }
 69 | .send-btn:hover:not(.send-btn:disabled) {
 70 |     filter: brightness(80%);
 71 | }
 72 | .send-btn:disabled {
 73 |     background-color: var(--minimal-dark);
 74 |     filter: brightness(100%);
 75 |     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.02);
 76 | }
 77 | /* ! ------------------------------- wrap right ------------------------------- ! */
 78 | .comming-soon-text {
 79 |     font-size: 4rem;
 80 |     text-transform: capitalize;
 81 |     color: var(--white);
 82 | }
 83 | .back-to-home {
 84 |     margin-top: 20px;
 85 |     padding: 10px 20px;
 86 |     border: none;
 87 |     outline: none;
 88 |     border-radius: 3px;
 89 |     background: var(--prety-blue) !important;
 90 |     color: var(--white) !important;
 91 |     font-size: 1.5rem;
 92 |     text-decoration: none;
 93 | }
 94 | .back-to-home:hover {
 95 |     filter: brightness(80%);
 96 | }
 97 | /* ! ------------------------------- media query ------------------------------ ! */
 98 | @media screen and ( max-width : 904px ) {
 99 |     body {
100 |         height: auto !important;
101 |     }
102 |     .wrap {
103 |         flex-direction: column !important;
104 |     }
105 |     .wrap-left-box {
106 |         width: 100%;
107 |         height: auto !important ; 
108 |         padding: 15% ;
109 |     }
110 |     .wrap-right-box {
111 |         width: 100%;
112 |         height: auto !important;
113 |         padding: 5%;
114 |     }
115 |     .container {
116 |         display: flex;
117 |         align-items: center;
118 |         flex-direction: column;
119 |     }
120 | }
121 | @media screen and ( max-width : 528px ) {
122 |     .wrap-left-box {
123 |         padding: 5%;
124 |     }
125 |     .comming-soon-text {
126 |         font-size: 3rem;
127 |     }
128 | }
129 | @media screen and ( max-width : 408px ) {
130 |     .wrap-left-box {
131 |         padding: 5%;
132 |     }
133 |     .comming-soon-text {
134 |         font-size: 2rem;
135 |     }
136 |     .validation-text {
137 |         font-size: 1rem;
138 |     }
139 | }


--------------------------------------------------------------------------------
/public/content/css/generate-pannel.css:
--------------------------------------------------------------------------------
 1 | /* ! ------------------------------ generate box ------------------------------ ! */
 2 | .generate-wrap-box {
 3 |     position: fixed;
 4 |     bottom: 0;
 5 |     right: 0;
 6 |     left: 0;
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     visibility: hidden;
10 |     overflow-y: auto;
11 | }
12 | .generate-wrap-box.active {
13 |     visibility: visible;
14 | }
15 | .generate-wrap-box::before {
16 |     content: '';
17 |     position: absolute;
18 |     inset: 0;
19 |     width: 100%;
20 |     height: 100%;
21 |     background-color: var(--one-c-dark);
22 |     opacity: 0.5;
23 | }
24 | .generate-box {
25 |     position: absolute;
26 |     bottom: -100%;
27 |     left: 0;
28 |     right: 0;
29 |     width: 100%;
30 |     height: auto;
31 |     background: var(--one-c-dark);
32 |     border-top: var(--light-border) 1px solid ;
33 |     z-index: 10;
34 |     padding: 20px;
35 |     transition: 0.5s;
36 | }
37 | .generate-wrap-box.active .generate-box {
38 |     bottom: 0;
39 | }
40 | .code-pannel {
41 |     width: 100%;
42 |     height: auto;
43 |     border-radius: 5px;
44 |     background: var(--generate-pannel);
45 |     padding: 15px 20px;
46 |     color: var(--white);
47 |     font-family: monospace;
48 | }
49 | .clipboard-btn {
50 |     width: 100%;
51 |     padding: 10px;
52 |     margin-top: 20px;
53 |     outline: none;
54 |     border: none;
55 |     border-radius: 5px;
56 |     text-transform: capitalize;
57 |     background-color: var(--prety-blue);
58 |     color: var(--white);
59 |     transition: 0.4s;
60 | }
61 | .clipboard-btn:hover {
62 |     filter: brightness(130%);
63 | }
64 | .close-generate-pannel-btn {
65 |     width: 100%;
66 |     padding: 10px;
67 |     margin: 20px 0;
68 |     border-radius: 5px;
69 |     outline: none;
70 |     border: none;
71 |     background-color: var(--d-white);
72 |     text-transform: capitalize;
73 | }


--------------------------------------------------------------------------------
/public/content/css/tools/font-size-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 | }
 74 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 75 | .pannel {
 76 |     position: relative;
 77 |     width: 100%;
 78 |     height: 100%;
 79 |     background: var(--sidebar-gradient);
 80 |     border-left: 1px solid var(--light-border);
 81 |     overflow-x: hidden;
 82 |     overflow-y: auto;
 83 |     z-index: 9999;
 84 | }
 85 | .pannel::before {
 86 |     content: '';
 87 |     position: absolute;
 88 |     top: 0;
 89 |     right: 0;
 90 |     width: 100%;
 91 |     height: 530px;
 92 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 93 |     background-position: top;
 94 |     background-size: contain;
 95 |     background-repeat: no-repeat;
 96 |     z-index: -1;
 97 | }
 98 | /* ! ------------------------------ pannel header ----------------------------- ! */
 99 | .header-pannel-heading {
100 |     font-weight: bolder;
101 |     text-transform: capitalize;
102 |     color: var(--white);
103 |     font-size: 25px;
104 | }
105 | .header-pannel-heading-icon {
106 |     color: var(--white);
107 |     cursor: pointer;
108 |     font-size: 1.5rem;
109 | }
110 | /* ! ------------------------ element class name input ------------------------ ! */
111 | .element-class-name-input {
112 |     color: var(--white) !important;
113 | }
114 | .element-class-name-input::placeholder {
115 |     color: var(--gray) !important;
116 |     text-transform: capitalize;
117 |     font-weight: bolder;
118 | }
119 | .element-class-name-text-icon {
120 |     color: var(--white);
121 | }
122 | /* ! ----------------------------- properties box ----------------------------- ! */
123 | .properties-input {
124 |     color: var(--white) !important;
125 | }
126 | .properties-input::placeholder {
127 |     color: var(--gray) !important;
128 |     text-transform: capitalize;
129 | }
130 | /* ! ------------------------------ footer pannel ----------------------------- ! */
131 | .css-code-btn {
132 |     width: 100%;
133 |     border-radius: 5px;
134 |     background-color: var(--prety-blue);
135 |     color: var(--white);
136 |     border: 1px solid var(--dark-black);
137 |     padding: 10px 0;
138 |     font-size: 17px;
139 | }
140 | /* ! ------------------------------ generate box ------------------------------ ! */
141 | .generate-wrap-box {
142 |     position: absolute;
143 |     bottom: 0;
144 |     right: 0;
145 |     left: 0;
146 |     width: 100%;
147 |     height: 100%;
148 |     visibility: hidden;
149 | }
150 | .generate-wrap-box.active {
151 |     visibility: visible;
152 | }
153 | .generate-wrap-box::before {
154 |     content: '';
155 |     position: absolute;
156 |     inset: 0;
157 |     width: 100%;
158 |     height: 100%;
159 |     background-color: var(--one-c-dark);
160 |     opacity: 0.5;
161 | }
162 | .generate-box {
163 |     position: absolute;
164 |     bottom: 0;
165 |     left: 0;
166 |     right: 0;
167 |     width: 100%;
168 |     height: 0;
169 |     background: var(--one-c-dark);
170 |     z-index: 10;
171 |     transition: 0.5s;
172 | }
173 | .generate-wrap-box.active .generate-box {
174 |     height: 73%;
175 | }
176 | /* ! ----------------------------- text container ----------------------------- ! wrap left box */
177 | .text-container {
178 |     width: 50%;
179 |     height: 70%;
180 |     display: flex;
181 |     align-items: center;
182 |     justify-content: center;
183 |     position: relative;
184 | }
185 | .text {
186 |     font-size: 50px ;
187 |     text-transform: capitalize;
188 |     color: var(--white);
189 |     text-align: center;
190 | }
191 | /* ! ------------------------------- media query ------------------------------ ! */
192 | @media screen and ( max-width : 1360px ) {
193 |     .text-container {
194 |         width: 80%;
195 |     }
196 | }
197 | @media screen and ( max-width : 1070px ) {
198 |     .wrap-right-box {
199 |         position: fixed;
200 |         top: 0;
201 |         right: 0;
202 |         width: 350px;
203 |         transform: translateX(100%);
204 |         visibility: hidden;
205 |         opacity: 0;
206 |     }
207 | }
208 | @media screen and ( min-width : 1070px ) {
209 |     .pannel-flash-box {
210 |         display: flex;
211 |     }
212 |     .wrap-right-box {
213 |         transform: translateX(0);
214 |     }
215 |     .wrap::before {
216 |         visibility: hidden !important;
217 |         opacity: 0 !important;
218 |     }
219 | }
220 | @media screen and ( max-width : 767px ) {
221 |     .wrap-left-box {
222 |         margin: 0;
223 |         padding-top: 50px;
224 |         overflow: hidden !important;
225 |     }
226 |     .text-container {
227 |         width: 90%;
228 |         height: 80%;
229 |     }
230 | }
231 | @media screen and ( max-width : 524px ) {
232 |     .wrap-right-box {
233 |         width: 100% !important;
234 |     }
235 |     .text-container {
236 |         width: 100%;
237 |     }
238 | }
239 | @media screen and ( max-height : 524px ) {
240 |     body {
241 |         height: auto !important;
242 |     }
243 |     .wrap {
244 |         height: 100vh;
245 |     }
246 | }


--------------------------------------------------------------------------------
/public/content/css/tools/letter-spacing-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 |     opacity: 0.8;
 74 | }
 75 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 76 | .pannel {
 77 |     position: relative;
 78 |     width: 100%;
 79 |     height: 100%;
 80 |     background: var(--sidebar-gradient);
 81 |     border-left: 1px solid var(--light-border);
 82 |     overflow-x: hidden;
 83 |     overflow-y: auto;
 84 |     z-index: 9999;
 85 | }
 86 | .pannel::before {
 87 |     content: '';
 88 |     position: absolute;
 89 |     top: 0;
 90 |     right: 0;
 91 |     width: 100%;
 92 |     height: 530px;
 93 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 94 |     background-position: top;
 95 |     background-size: contain;
 96 |     background-repeat: no-repeat;
 97 |     z-index: -1;
 98 | }
 99 | /* ! ------------------------------ pannel header ----------------------------- ! */
100 | .header-pannel-heading {
101 |     font-weight: bolder;
102 |     text-transform: capitalize;
103 |     color: var(--white);
104 |     font-size: 25px;
105 | }
106 | .header-pannel-heading-icon {
107 |     color: var(--white);
108 |     cursor: pointer;
109 |     font-size: 1.5rem;
110 | }
111 | /* ! ------------------------ element class name input ------------------------ ! */
112 | .element-class-name-input {
113 |     color: var(--white) !important;
114 | }
115 | .element-class-name-input::placeholder {
116 |     color: var(--gray) !important;
117 |     text-transform: capitalize;
118 |     font-weight: bolder;
119 | }
120 | .element-class-name-text-icon {
121 |     color: var(--white);
122 | }
123 | /* ! ----------------------------- properties box ----------------------------- ! */
124 | .properties-input {
125 |     color: var(--white) !important;
126 | }
127 | .properties-input::placeholder {
128 |     color: var(--gray) !important;
129 |     text-transform: capitalize;
130 | }
131 | /* ! ------------------------------ footer pannel ----------------------------- ! */
132 | .css-code-btn {
133 |     width: 100%;
134 |     border-radius: 5px;
135 |     background-color: var(--prety-blue);
136 |     color: var(--white);
137 |     padding: 10px 0;
138 |     border: 1px solid var(--dark-black);
139 |     font-size: 17px;
140 | }
141 | /* ! ------------------------------ generate box ------------------------------ ! */
142 | .generate-wrap-box {
143 |     position: absolute;
144 |     bottom: 0;
145 |     right: 0;
146 |     left: 0;
147 |     width: 100%;
148 |     height: 100%;
149 |     visibility: hidden;
150 | }
151 | .generate-wrap-box.active {
152 |     visibility: visible;
153 | }
154 | .generate-wrap-box::before {
155 |     content: '';
156 |     position: absolute;
157 |     inset: 0;
158 |     width: 100%;
159 |     height: 100%;
160 |     background-color: var(--one-c-dark);
161 |     opacity: 0.5;
162 | }
163 | .generate-box {
164 |     position: absolute;
165 |     bottom: 0;
166 |     left: 0;
167 |     right: 0;
168 |     width: 100%;
169 |     height: 0;
170 |     background: var(--one-c-dark);
171 |     z-index: 10;
172 |     transition: 0.5s;
173 | }
174 | .generate-wrap-box.active .generate-box {
175 |     height: 73%;
176 | }
177 | /* ! ----------------------------- text container ----------------------------- ! wrap left box */
178 | .text-container {
179 |     width: 100%;
180 |     height: 70%;
181 |     display: flex;
182 |     align-items: center;
183 |     justify-content: center;
184 |     position: relative;
185 | }
186 | .text {
187 |     font-size: 4rem ;
188 |     text-transform: capitalize;
189 |     color: var(--white);
190 |     letter-spacing: 3px;
191 |     text-align: center;
192 | }
193 | /* ! ------------------------------- media query ------------------------------ ! */
194 | @media screen and ( max-width : 1360px ) {
195 |     .text {
196 |         font-size: 3rem;
197 |     }
198 | }
199 | @media screen and ( max-width : 1070px ) {
200 |     .wrap-right-box {
201 |         position: fixed;
202 |         top: 0;
203 |         right: 0;
204 |         width: 350px;
205 |         transform: translateX(100%);
206 |         visibility: hidden;
207 |         opacity: 0;
208 |     }
209 | }
210 | @media screen and ( min-width : 1070px ) {
211 |     .pannel-flash-box {
212 |         display: flex;
213 |     }
214 |     .wrap-right-box {
215 |         transform: translateX(0);
216 |     }
217 |     .wrap::before {
218 |         visibility: hidden !important;
219 |         opacity: 0 !important;
220 |     }
221 | }
222 | @media screen and ( max-width : 767px ) {
223 |     .wrap-left-box {
224 |         margin: 0;
225 |         padding-top: 50px;
226 |         overflow: hidden !important;
227 |     }
228 | }
229 | @media screen and ( max-width : 524px ) {
230 |     .wrap-right-box {
231 |         width: 100% !important;
232 |     }
233 | }
234 | @media screen and ( max-height : 524px ) {
235 |     body {
236 |         height: auto !important;
237 |     }
238 |     .wrap {
239 |         height: 100vh;
240 |     }
241 | }


--------------------------------------------------------------------------------
/public/content/css/tools/line-height-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 | }
 74 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 75 | .pannel {
 76 |     position: relative;
 77 |     width: 100%;
 78 |     height: 100%;
 79 |     background: var(--sidebar-gradient);
 80 |     border-left: 1px solid var(--light-border);
 81 |     overflow-x: hidden;
 82 |     overflow-y: auto;
 83 |     z-index: 9999;
 84 | }
 85 | .pannel::before {
 86 |     content: '';
 87 |     position: absolute;
 88 |     top: 0;
 89 |     right: 0;
 90 |     width: 100%;
 91 |     height: 530px;
 92 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 93 |     background-position: top;
 94 |     background-size: contain;
 95 |     background-repeat: no-repeat;
 96 |     z-index: -1;
 97 | }
 98 | /* ! ------------------------------ pannel header ----------------------------- ! */
 99 | .header-pannel-heading {
100 |     font-weight: bolder;
101 |     text-transform: capitalize;
102 |     color: var(--white);
103 |     font-size: 25px;
104 | }
105 | .header-pannel-heading-icon {
106 |     color: var(--white);
107 |     cursor: pointer;
108 |     font-size: 1.5rem;
109 | }
110 | /* ! ------------------------ element class name input ------------------------ ! */
111 | .element-class-name-input {
112 |     color: var(--white) !important;
113 | }
114 | .element-class-name-input::placeholder {
115 |     color: var(--gray) !important;
116 |     text-transform: capitalize;
117 |     font-weight: bolder;
118 | }
119 | .element-class-name-text-icon {
120 |     color: var(--white);
121 | }
122 | /* ! ----------------------------- properties box ----------------------------- ! */
123 | .properties-input {
124 |     color: var(--white) !important;
125 | }
126 | .properties-input::placeholder {
127 |     color: var(--gray) !important;
128 |     text-transform: capitalize;
129 | }
130 | /* ! ------------------------------ footer pannel ----------------------------- ! */
131 | .css-code-btn {
132 |     width: 100%;
133 |     border-radius: 5px;
134 |     background-color: var(--prety-blue);
135 |     color: var(--white);
136 |     padding: 10px 0;
137 |     border: 1px solid var(--dark-black);
138 |     font-size: 17px;
139 | }
140 | /* ! ------------------------------ generate box ------------------------------ ! */
141 | .generate-wrap-box {
142 |     position: absolute;
143 |     bottom: 0;
144 |     right: 0;
145 |     left: 0;
146 |     width: 100%;
147 |     height: 100%;
148 |     visibility: hidden;
149 | }
150 | .generate-wrap-box.active {
151 |     visibility: visible;
152 | }
153 | .generate-wrap-box::before {
154 |     content: '';
155 |     position: absolute;
156 |     inset: 0;
157 |     width: 100%;
158 |     height: 100%;
159 |     background-color: var(--one-c-dark);
160 |     opacity: 0.5;
161 | }
162 | .generate-box {
163 |     position: absolute;
164 |     bottom: 0;
165 |     left: 0;
166 |     right: 0;
167 |     width: 100%;
168 |     height: 0;
169 |     background: var(--one-c-dark);
170 |     z-index: 10;
171 |     transition: 0.5s;
172 | }
173 | .generate-wrap-box.active .generate-box {
174 |     height: 73%;
175 | }
176 | /* ! ----------------------------- text container ----------------------------- ! wrap left box */
177 | .text-container {
178 |     width: 50%;
179 |     height: 70%;
180 |     display: flex;
181 |     align-items: center;
182 |     justify-content: center;
183 |     position: relative;
184 | }
185 | .text {
186 |     font-size: 2rem ;
187 |     text-align: center;
188 |     text-transform: capitalize;
189 |     color: var(--white);
190 |     line-height: 70px;
191 | }
192 | /* ! ------------------------------- media query ------------------------------ ! */
193 | @media screen and ( max-width : 1360px ) {
194 |     .text-container {
195 |         width: 80%;
196 |     }
197 | }
198 | @media screen and ( max-width : 1070px ) {
199 |     .wrap-right-box {
200 |         position: fixed;
201 |         top: 0;
202 |         right: 0;
203 |         width: 350px;
204 |         transform: translateX(100%);
205 |         visibility: hidden;
206 |         opacity: 0;
207 |     }
208 | }
209 | @media screen and ( min-width : 1070px ) {
210 |     .pannel-flash-box {
211 |         display: flex;
212 |     }
213 |     .wrap-right-box {
214 |         transform: translateX(0);
215 |     }
216 |     .wrap::before {
217 |         visibility: hidden !important;
218 |         opacity: 0 !important;
219 |     }
220 | }
221 | @media screen and ( max-width : 767px ) {
222 |     .wrap-left-box {
223 |         margin: 0;
224 |         padding-top: 50px;
225 |         overflow: hidden !important;
226 |     }
227 |     .text-container {
228 |         width: 90%;
229 |         height: 80%;
230 |     }
231 | }
232 | @media screen and ( max-width : 524px ) {
233 |     .wrap-right-box {
234 |         width: 100% !important;
235 |     }
236 |     .text-container {
237 |         width: 100%;
238 |     }
239 | }
240 | @media screen and ( max-height : 524px ) {
241 |     body {
242 |         height: auto !important;
243 |     }
244 |     .wrap {
245 |         height: 100vh;
246 |     }
247 | }
248 | @media screen and ( max-width : 372px ) {
249 |     .text {
250 |         font-size: 1.5rem;
251 |     }
252 | }


--------------------------------------------------------------------------------
/public/content/css/tools/opacity-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 | }
 74 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 75 | .pannel {
 76 |     position: relative;
 77 |     width: 100%;
 78 |     height: 100%;
 79 |     background: var(--sidebar-gradient);
 80 |     border-left: 1px solid var(--light-border);
 81 |     overflow-x: hidden;
 82 |     overflow-y: auto;
 83 |     z-index: 9999;
 84 | }
 85 | .pannel::before {
 86 |     content: '';
 87 |     position: absolute;
 88 |     top: 0;
 89 |     right: 0;
 90 |     width: 100%;
 91 |     height: 530px;
 92 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 93 |     background-position: top;
 94 |     background-size: contain;
 95 |     background-repeat: no-repeat;
 96 |     z-index: -1;
 97 | }
 98 | /* ! ------------------------------ pannel header ----------------------------- ! */
 99 | .header-pannel-heading {
100 |     font-weight: bolder;
101 |     text-transform: capitalize;
102 |     color: var(--white);
103 |     font-size: 25px;
104 | }
105 | .header-pannel-heading-icon {
106 |     color: var(--white);
107 |     cursor: pointer;
108 |     font-size: 1.5rem;
109 | }
110 | /* ! ------------------------ element class name input ------------------------ ! */
111 | .element-class-name-input {
112 |     color: var(--white) !important;
113 | }
114 | .element-class-name-input::placeholder {
115 |     color: var(--gray) !important;
116 |     text-transform: capitalize;
117 |     font-weight: bolder;
118 | }
119 | .element-class-name-text-icon {
120 |     color: var(--white);
121 | }
122 | /* ! ----------------------------- properties box ----------------------------- ! */
123 | .properties-input {
124 |     color: var(--white) !important;
125 | }
126 | .properties-input::placeholder {
127 |     color: var(--gray) !important;
128 |     text-transform: capitalize;
129 | }
130 | /* ! ------------------------------ footer pannel ----------------------------- ! */
131 | .css-code-btn {
132 |     width: 100%;
133 |     border-radius: 5px;
134 |     background-color: var(--prety-blue);
135 |     color: var(--white);
136 |     border: 1px solid var(--dark-black) ;
137 |     padding: 10px 0;
138 |     font-size: 17px;
139 | }
140 | /* ! --------------------------- resizable container -------------------------- ! wrap left box */
141 | .resizable-container {
142 |     width: 50%;
143 |     height: 70%;
144 |     display: flex;
145 |     align-items: center;
146 |     justify-content: center;
147 |     position: relative;
148 | }
149 | .resizable {
150 |     background: var(--prety-blue);
151 |     width: 250px;
152 |     height: 250px;
153 |     position: relative;
154 |     border-radius: 50px;
155 |     border: 1px solid var(--light-border);
156 |     min-width: 100px;
157 |     min-height: 100px;
158 |     max-height: 350px;
159 |     max-width: 350px;
160 | }
161 | .resizable .resizers {
162 |     width: 100%;
163 |     height: 100%;
164 |     border: 2px solid var(--d-white);
165 |     border-radius: 0;
166 |     box-sizing: border-box;
167 |     opacity: 0;
168 |     visibility: hidden;
169 |     transition: all 0.4s linear;
170 | }
171 | .resizable .resizers .resizer {
172 |     width: 13px;
173 |     height: 13px;
174 |     background: var(--prety-blue);
175 |     border-radius: 100%;
176 |     border: 2px solid var(--d-white);
177 |     position: absolute;
178 | }
179 | .resizable .resizers .resizer.top-left {
180 |     left: -5px;
181 |     top: -5px;
182 |     cursor: nwse-resize; 
183 | }
184 | .resizable .resizers .resizer.top-right {
185 |     right: -5px;
186 |     top: -5px;
187 |     cursor: nesw-resize;
188 | }
189 | .resizable .resizers .resizer.bottom-left {
190 |     left: -5px;
191 |     bottom: -5px;
192 |     cursor: nesw-resize;
193 | }
194 | .resizable .resizers .resizer.bottom-right {
195 |     right: -5px;
196 |     bottom: -5px;
197 |     cursor: nwse-resize;
198 | }
199 | .resizers.active {
200 |     opacity: 1;
201 |     visibility: visible;
202 | }
203 | .resizable:hover .resizers {
204 |     opacity: 1;
205 |     visibility: visible;
206 | }
207 | /* ! ------------------------------- media query ------------------------------ ! */
208 | @media screen and ( max-width : 1070px ) {
209 |     .wrap-right-box {
210 |         position: fixed;
211 |         top: 0;
212 |         right: 0;
213 |         width: 350px;
214 |         transform: translateX(100%);
215 |         visibility: hidden;
216 |         opacity: 0;
217 |     }
218 | }
219 | @media screen and ( min-width : 1070px ) {
220 |     .pannel-flash-box {
221 |         display: flex;
222 |     }
223 |     .wrap-right-box {
224 |         transform: translateX(0);
225 |     }
226 |     .wrap::before {
227 |         visibility: hidden !important;
228 |         opacity: 0 !important;
229 |     }
230 |     .resizable-container {
231 |         width: 80% ;
232 |     }
233 | }
234 | @media screen and ( max-width : 767px ) {
235 |     .wrap-left-box {
236 |         margin: 0;
237 |         padding-top: 50px;
238 |         overflow: hidden !important;
239 |     }
240 |     .resizable-container {
241 |         width: 90%;
242 |         height: 80%;
243 |     }
244 | }
245 | @media screen and ( max-width : 500px ) {
246 |     .wrap-right-box {
247 |         width: 100% !important;
248 |     }
249 | }
250 | @media screen and ( max-height : 500px ) {
251 |     body {
252 |         height: auto !important;
253 |     }
254 |     .wrap {
255 |         height: 150vh;
256 |     }
257 | }


--------------------------------------------------------------------------------
/public/content/css/tools/text-color-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 | }
 74 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 75 | .pannel {
 76 |     position: relative;
 77 |     width: 100%;
 78 |     height: 100%;
 79 |     background: var(--sidebar-gradient);
 80 |     border-left: 1px solid var(--light-border);
 81 |     overflow-x: hidden;
 82 |     overflow-y: auto;
 83 |     z-index: 9999;
 84 | }
 85 | .pannel::before {
 86 |     content: '';
 87 |     position: absolute;
 88 |     top: 0;
 89 |     right: 0;
 90 |     width: 100%;
 91 |     height: 530px;
 92 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 93 |     background-position: top;
 94 |     background-size: contain;
 95 |     background-repeat: no-repeat;
 96 |     z-index: -1;
 97 | }
 98 | /* ! ------------------------------ pannel header ----------------------------- ! */
 99 | .header-pannel-heading {
100 |     font-weight: bolder;
101 |     text-transform: capitalize;
102 |     color: var(--white);
103 |     font-size: 25px;
104 | }
105 | .header-pannel-heading-icon {
106 |     color: var(--white);
107 |     cursor: pointer;
108 |     font-size: 1.5rem;
109 | }
110 | /* ! ------------------------ element class name input ------------------------ ! */
111 | .element-class-name-input {
112 |     color: var(--white) !important;
113 | }
114 | .element-class-name-input::placeholder {
115 |     color: var(--gray) !important;
116 |     text-transform: capitalize;
117 |     font-weight: bolder;
118 | }
119 | .element-class-name-text-icon {
120 |     color: var(--white);
121 | }
122 | /* ! ------------------------------ color picker ------------------------------ ! */
123 | .color-picker-box {
124 |     margin-top: 20px;
125 | }
126 | .color-picker {
127 |     width: 80px;
128 |     height: 35px;
129 |     border-radius: 3px;
130 |     border : none;
131 |     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
132 |     position: relative;
133 |     border : 1px solid var(--light-border);
134 |     background : var(--white);
135 | }
136 | .choose-color-picker-text {
137 |     color: var(--minimal-white);
138 |     font-size: 18px;
139 | }
140 | /* ! ------------------------------ footer pannel ----------------------------- ! */
141 | .css-code-btn {
142 |     width: 100%;
143 |     border-radius: 5px;
144 |     background-color: var(--prety-blue);
145 |     border: 1px solid var(--dark-black);
146 |     color: var(--white);
147 |     padding: 10px 0;
148 |     font-size: 17px;
149 | }
150 | /* ! --------------------------- resizable container -------------------------- ! wrap left box */
151 | .text-container {
152 |     width: 50%;
153 |     height: 70%;
154 |     display: flex;
155 |     align-items: center;
156 |     justify-content: center;
157 |     position: relative;
158 | }
159 | .text {
160 |     font-size: 4rem;
161 |     color: var(--white);
162 |     text-transform: capitalize;
163 | }
164 | /* ! ------------------------------- media query ------------------------------ ! */
165 | @media screen and ( max-width : 1360px ) {
166 |     .text-container {
167 |         width: 80%;
168 |     }
169 | }
170 | @media screen and ( max-width : 1070px ) {
171 |     .wrap-right-box {
172 |         position: fixed;
173 |         top: 0;
174 |         right: 0;
175 |         width: 350px;
176 |         transform: translateX(100%);
177 |         visibility: hidden;
178 |         opacity: 0;
179 |     }
180 | }
181 | @media screen and ( min-width : 1070px ) {
182 |     .pannel-flash-box {
183 |         display: flex;
184 |     }
185 |     .wrap-right-box {
186 |         transform: translateX(0);
187 |     }
188 |     .wrap::before {
189 |         visibility: hidden !important;
190 |         opacity: 0 !important;
191 |     }
192 | }
193 | @media screen and ( max-width : 767px ) {
194 |     .wrap-left-box {
195 |         margin: 0;
196 |         padding-top: 50px;
197 |         overflow: hidden !important;
198 |     }
199 |     .text-container {
200 |         width: 90%;
201 |         height: 80%;
202 |     }
203 | }
204 | @media screen and ( max-width : 524px ) {
205 |     .wrap-right-box {
206 |         width: 100% !important;
207 |     }
208 |     .text-container {
209 |         width: 100%;
210 |     }
211 |     .text {
212 |         font-size: 3rem;
213 |     }
214 | }
215 | @media screen and ( max-height : 524px ) {
216 |     body {
217 |         height: auto !important;
218 |     }
219 |     .wrap {
220 |         height: 100vh;
221 |     }
222 | }
223 | @media screen and ( max-width : 378px ) {
224 |     .text {
225 |         font-size: 2.5rem;
226 |     }
227 | }


--------------------------------------------------------------------------------
/public/content/css/tools/text-stroke-tool.css:
--------------------------------------------------------------------------------
  1 | @import url(../../../components/aside/aside.css);
  2 | /* ! ---------------------------------- body ---------------------------------- ! */
  3 | body {
  4 |     background : var(--home-gradient) ;
  5 |     position: relative;
  6 |     display: flex;
  7 |     overflow-x: hidden;
  8 |     height: 100vh;
  9 | }
 10 | /* ! ---------------------------------- wrap ---------------------------------- ! */
 11 | .wrap {
 12 |     display: flex;
 13 |     width: 100%;
 14 |     height: 100%;
 15 | }
 16 | .wrap-left-box {
 17 |     width: 100%;
 18 |     height: 100%;
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 |     margin-left: 100px;
 23 | }
 24 | .wrap-right-box {
 25 |     width: 500px;
 26 |     height: 100%;
 27 |     z-index: 9999;
 28 |     transition: all 0.4s;
 29 |     transform: translateX(100%);
 30 | }
 31 | .wrap-right-box.active {
 32 |     visibility: visible;
 33 |     opacity: 1;
 34 |     transform: translateX(0);
 35 | }
 36 | .wrap::before {
 37 |     content: '';
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     opacity: 0;
 44 |     background: var(--dark-black);
 45 |     transition: all 0.4s;
 46 |     z-index: 20;
 47 |     visibility: hidden;
 48 |     opacity: 0;
 49 | }
 50 | .wrap.active::before {
 51 |     visibility: visible;
 52 |     opacity: 0.8;
 53 | }
 54 | /* ! ------------------------------ pannel flash ------------------------------ ! */
 55 | .pannel-flash-box {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     right: 50px;
 59 |     border-radius: 100%;
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |     width: 60px;
 64 |     height: 60px;
 65 |     background: linear-gradient(50deg, var(--dark-blue), var(--light-purple));
 66 |     z-index: 1000;
 67 |     transform: translateY(-50%);
 68 |     display: none;
 69 |     color: var(--white);
 70 |     margin-right: -5px;
 71 |     font-size: 1.3rem;
 72 |     cursor: pointer;
 73 | }
 74 | /* ! --------------------------------- pannel --------------------------------- wrap right box ! */
 75 | .pannel {
 76 |     position: relative;
 77 |     width: 100%;
 78 |     height: 100%;
 79 |     background: var(--sidebar-gradient);
 80 |     border-left: 1px solid var(--light-border);
 81 |     overflow-x: hidden;
 82 |     overflow-y: auto;
 83 |     z-index: 9999;
 84 | }
 85 | .pannel::before {
 86 |     content: '';
 87 |     position: absolute;
 88 |     top: 0;
 89 |     right: 0;
 90 |     width: 100%;
 91 |     height: 530px;
 92 |     background-image: url(../../../content/img/pannel/pannel_back/pannel_back.png);
 93 |     background-position: top;
 94 |     background-size: contain;
 95 |     background-repeat: no-repeat;
 96 |     z-index: -1;
 97 | }
 98 | /* ! ------------------------------ pannel header ----------------------------- ! */
 99 | .header-pannel-heading {
100 |     font-weight: bolder;
101 |     text-transform: capitalize;
102 |     color: var(--white);
103 |     font-size: 25px;
104 | }
105 | .header-pannel-heading-icon {
106 |     color: var(--white);
107 |     cursor: pointer;
108 |     font-size: 1.5rem;
109 | }
110 | /* ! ------------------------ element class name input ------------------------ ! */
111 | .element-class-name-input {
112 |     color: var(--white) !important;
113 | }
114 | .element-class-name-input::placeholder {
115 |     color: var(--gray) !important;
116 |     text-transform: capitalize;
117 |     font-weight: bolder;
118 | }
119 | .element-class-name-text-icon {
120 |     color: var(--white);
121 | }
122 | /* ! ----------------------------- properties box ----------------------------- ! */
123 | .properties-input {
124 |     color: var(--white) !important;
125 | }
126 | .properties-input::placeholder {
127 |     color: var(--gray) !important;
128 |     text-transform: capitalize;
129 | }
130 | /* ! ------------------------------ color picker ------------------------------ ! */
131 | .color-picker-box {
132 |     margin-top: 20px;
133 | }
134 | .color-picker {
135 |     width: 80px;
136 |     height: 35px;
137 |     border-radius: 3px;
138 |     border : none;
139 |     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
140 |     position: relative;
141 |     border : 1px solid var(--light-border);
142 |     background : var(--white);
143 | }
144 | .choose-color-picker-text {
145 |     color: var(--minimal-white);
146 |     font-size: 18px;
147 | }
148 | /* ! ------------------------------ footer pannel ----------------------------- ! */
149 | .css-code-btn {
150 |     width: 100%;
151 |     border-radius: 5px;
152 |     background-color: var(--prety-blue);
153 |     color: var(--white);
154 |     border: 1px solid var(--dark-black);
155 |     padding: 10px 0;
156 |     font-size: 17px;
157 | }
158 | /* ! ------------------------------ generate box ------------------------------ ! */
159 | .generate-wrap-box {
160 |     position: absolute;
161 |     bottom: 0;
162 |     right: 0;
163 |     left: 0;
164 |     width: 100%;
165 |     height: 100%;
166 |     visibility: hidden;
167 | }
168 | .generate-wrap-box.active {
169 |     visibility: visible;
170 | }
171 | .generate-wrap-box::before {
172 |     content: '';
173 |     position: absolute;
174 |     inset: 0;
175 |     width: 100%;
176 |     height: 100%;
177 |     background-color: var(--one-c-dark);
178 |     opacity: 0.5;
179 | }
180 | .generate-box {
181 |     position: absolute;
182 |     bottom: 0;
183 |     left: 0;
184 |     right: 0;
185 |     width: 100%;
186 |     height: 0;
187 |     background: var(--one-c-dark);
188 |     z-index: 10;
189 |     transition: 0.5s;
190 | }
191 | .generate-wrap-box.active .generate-box {
192 |     height: 73%;
193 | }
194 | /* ! ----------------------------- text container ----------------------------- ! wrap left box */
195 | .text-container {
196 |     width: 50%;
197 |     height: 70%;
198 |     display: flex;
199 |     align-items: center;
200 |     justify-content: center;
201 |     position: relative;
202 | }
203 | .text {
204 |     font-size: 4rem;
205 |     color: var(--white);
206 |     text-transform: capitalize;
207 | }
208 | /* ! ------------------------------- media query ------------------------------ ! */
209 | @media screen and ( max-width : 1360px ) {
210 |     .text-container {
211 |         width: 80%;
212 |     }
213 | }
214 | @media screen and ( max-width : 1070px ) {
215 |     .wrap-right-box {
216 |         position: fixed;
217 |         top: 0;
218 |         right: 0;
219 |         width: 350px;
220 |         transform: translateX(100%);
221 |         visibility: hidden;
222 |         opacity: 0;
223 |     }
224 | }
225 | @media screen and ( min-width : 1070px ) {
226 |     .pannel-flash-box {
227 |         display: flex;
228 |     }
229 |     .wrap-right-box {
230 |         transform: translateX(0);
231 |     }
232 |     .wrap::before {
233 |         visibility: hidden !important;
234 |         opacity: 0 !important;
235 |     }
236 | }
237 | @media screen and ( max-width : 767px ) {
238 |     .wrap-left-box {
239 |         margin: 0;
240 |         padding-top: 50px;
241 |         overflow: hidden !important;
242 |     }
243 |     .text-container {
244 |         width: 90%;
245 |         height: 80%;
246 |     }
247 | }
248 | @media screen and ( max-width : 524px ) {
249 |     .wrap-right-box {
250 |         width: 100% !important;
251 |     }
252 |     .text-container {
253 |         width: 100%;
254 |     }
255 |     .text {
256 |         font-size: 2rem;
257 |     }
258 | }
259 | @media screen and ( max-height : 524px ) {
260 |     body {
261 |         height: auto !important;
262 |     }
263 |     .wrap {
264 |         height: 100vh;
265 |     }
266 | }
267 | @media screen and ( max-width : 378px ) {
268 |     .text {
269 |         font-size: 2rem;
270 |     }
271 | }


--------------------------------------------------------------------------------
/public/content/img/background-tool/body-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/background-tool/body-background.png


--------------------------------------------------------------------------------
/public/content/img/css-img/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/css-img/css.png


--------------------------------------------------------------------------------
/public/content/img/css-img/css3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/css-img/css3.jpg


--------------------------------------------------------------------------------
/public/content/img/pannel/pannel_back/pannel_back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/pannel/pannel_back/pannel_back.png


--------------------------------------------------------------------------------
/public/content/img/triangle/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/triangle/triangle.png


--------------------------------------------------------------------------------
/public/content/img/wallpaper/main-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/CSS3-Generator/0210cda42f6e4f2094278d1f3bfe8b2e3e89aa45/public/content/img/wallpaper/main-image.jpg


--------------------------------------------------------------------------------
/public/content/js/home.js:
--------------------------------------------------------------------------------
 1 | const toolBoxButtons = document.querySelectorAll(".tool-box-button")
 2 | const searchBtn = document.querySelector(".search-btn")
 3 | const searchInp = document.querySelector(".search-input")
 4 | const scrollToTopCircle = document.querySelector(".scrollToTop-circle")
 5 | 
 6 | //? find tool box based by user search
 7 | const findToolBoxes = () => {
 8 |     //? get search value
 9 |     const searchValue = searchInp.value
10 |     if (searchValue.length !== 0) {
11 |         //? delete all class active for tool box buttons
12 |         deleteActiveClass(toolBoxButtons)
13 | 
14 |         //? find search tool box
15 |         let SearchToolBox = Array.from(toolBoxButtons).find(button => {
16 |             return String(button.dataset.tool).toLowerCase().includes(searchValue.toLowerCase())
17 |         })
18 |         
19 |         //? if search tool box !== null or ...
20 |         if (SearchToolBox) {
21 |             //? scroll to this tool
22 |             window.scrollTo({
23 |                 top: SearchToolBox.getBoundingClientRect().top - 50,
24 |                 behavior: "smooth"
25 |             })
26 | 
27 |             SearchToolBox.classList.add("active")
28 |         }
29 |     }
30 | }
31 | 
32 | //? delete class active 
33 | const deleteActiveClass = (elements) => {
34 |     elements.forEach(item => {
35 |         item.classList.remove("active")
36 |     })
37 | }
38 | 
39 | //? go to top scroll , scroll top = 0
40 | const goToTop = () => {
41 |     window.scrollTo({
42 |         top: 0,
43 |         behavior: "smooth"
44 |     })
45 | }
46 | 
47 | searchBtn.addEventListener("click", findToolBoxes)
48 | scrollToTopCircle.addEventListener("click", goToTop)
49 | searchInp.addEventListener("keyup", (e) => {
50 |     if (e.target.value.length === 0) 
51 |         deleteActiveClass(toolBoxButtons)
52 |     e.key === "Enter" ? findToolBoxes() : ""
53 | })


--------------------------------------------------------------------------------
/public/content/js/modules/functions.js:
--------------------------------------------------------------------------------
 1 | //? disable all inputs function
 2 | export const disableAllInputs = (activate, elementsActivate, elements) => {
 3 |     if (activate) 
 4 |         elementsActivate.forEach(element => document.querySelector(`.${element}`).disabled = true)
 5 |     else
 6 |         elements.forEach(element => document.querySelector(`.${element}`).disabled = true)
 7 | }
 8 | 
 9 | //? active all inputs
10 | export const activeAllInputs = (activate, elementsActivate, elements) => {
11 |     if (activate)
12 |         elementsActivate.forEach(element => document.querySelector(`.${element}`).disabled = false)
13 |     else 
14 |         elements.forEach(element => document.querySelector(`.${element}`).disabled = false)
15 | }
16 | 
17 | //? remove translate data from inputs
18 | export const removeDataFromInputs = (activate, elementsActivate, elements) => {
19 |     if (activate) 
20 |         elementsActivate.forEach(element => document.querySelector(`.${element}`).value = "")
21 |     else 
22 |         elements.forEach(element => document.querySelector(`.${element}`).value = "")
23 | }
24 | 
25 | //? upload data in inputs
26 | export const uploadDataInInputs = (activate , elementsActivate, elements, val) => {
27 |     if (activate) {
28 |         elementsActivate.forEach(element => document.querySelector(`.${element}`).value = val)
29 |     } else 
30 |         elements.forEach(element => document.querySelector(`.${element}`).value = val)
31 | }
32 | 
33 | //? create data box
34 | export const createDataBox = (activate = false , className , text , switchToBox) => {
35 |     const dataBox = document.createElement("div")
36 |     dataBox.className = className
37 |     activate ? dataBox.classList.add("active") : dataBox.classList.remove("active")
38 |     dataBox.innerHTML = text
39 |     dataBox.addEventListener("click" , () => switchToBox(dataBox.innerHTML))
40 |     return dataBox
41 | }


--------------------------------------------------------------------------------
/public/content/js/modules/image-preview.js:
--------------------------------------------------------------------------------
 1 | const previewBorder = document.querySelector(".preview-border")
 2 | const previewImgBox = document.querySelector(".preview-image-box")
 3 | const wrap = document.querySelector(".image-preview")
 4 | 
 5 | previewBorder.addEventListener("mousedown", () => {
 6 |     window.addEventListener("mousemove", changeWidth)
 7 |     window.addEventListener("mouseup", deleteMouseDownEvent)
 8 | })
 9 | 
10 | const changeWidth = (e) => {
11 |     // previewImgBox.style.width = `${((e.clientX - wrap.getBoundingClientRect().left) / 10).toFixed(0)}%`
12 |     previewImgBox.style.width = `${((e.clientX - wrap.getBoundingClientRect().left)).toFixed(0)}px`
13 |     let Width = Number(previewImgBox.style.width.substr(0 , previewImgBox.style.width.length - 2))
14 | 
15 |     if (Width >= 810)
16 |         previewImgBox.style.width = "810px"
17 |     else if (Width <= 3)
18 |         previewImgBox.style.width = "3px"
19 | }
20 | 
21 | const deleteMouseDownEvent = () => {
22 |     window.removeEventListener("mousemove", changeWidth)
23 | }


--------------------------------------------------------------------------------
/public/content/js/modules/pickr.js:
--------------------------------------------------------------------------------
 1 | export const createPickr = (element, color) => {
 2 |     const pickr = Pickr.create({
 3 |         el: element,
 4 |         theme: 'classic',
 5 |         useAsButton : true ,
 6 |         default : `${color}`,
 7 |         components: {
 8 |             preview: true,
 9 |             opacity: true,
10 |             hue: true,
11 |     
12 |             interaction: {
13 |                 hex: true,
14 |                 rgba: true,
15 |                 input: true,
16 |             }
17 |         }
18 |     })
19 |     return pickr
20 | }


--------------------------------------------------------------------------------
/public/content/js/modules/resizer.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // ? make resizable for resizable box
 3 | export const makeResizableElem = elem => {
 4 |     const element  = document.querySelector(elem)
 5 |     const resizers = document.querySelector(`${elem} .resizers`)
 6 |     const resizer  = document.querySelectorAll(`${elem} .resizer`)
 7 |     
 8 |     //? dot clicked
 9 |     let currentDot = null
10 | 
11 |     resizer.forEach(dot => {
12 |         dot.addEventListener("mousedown", (e) => {
13 |             window.addEventListener("mousemove" , resize)
14 |             //? put dot in currentDot
15 |             currentDot = dot
16 |             window.addEventListener("mouseup", stopResize)
17 |         })
18 |     })
19 | 
20 |     //? resize function for mousemove on window
21 |     const resize = (e) => {        
22 |         //? resizers dont has a active class ==> add class to resizers
23 |         if (!resizers.classList.contains("active")) {
24 |             resizers.classList.add("active")
25 |         }
26 | 
27 |         if (currentDot.classList.contains("bottom-right")) {
28 |             //? set width and height
29 |             element.style.width = `${e.clientX - element.getBoundingClientRect().left}px`
30 |             element.style.height = `${e.clientY - element.getBoundingClientRect().top}px`
31 |         }else if (currentDot.classList.contains('bottom-left')) {
32 |             //? set width and height
33 |             element.style.width = `${element.getBoundingClientRect().right - e.clientX}px`
34 |             element.style.height = `${e.clientY - element.getBoundingClientRect().top}px`
35 |         }else if (currentDot.classList.contains("top-right")) {
36 |             //? set width and height
37 |             element.style.width = `${e.clientX - element.getBoundingClientRect().left}px`
38 |             element.style.height = `${element.getBoundingClientRect().bottom - e.clientY}px`
39 |         }else {
40 |             //? set width and height
41 |             element.style.width = `${element.getBoundingClientRect().right - e.clientX}px`
42 |             element.style.height = `${element.getBoundingClientRect().bottom - e.clientY}px`
43 |         }
44 |     }
45 |     
46 |     const stopResize = () => {
47 |         resizers.classList.remove("active")
48 |         //? remove resizers active class
49 |         window.removeEventListener("mousemove", resize)
50 |     }
51 | }


--------------------------------------------------------------------------------
/public/content/js/modules/responsive-pannel.js:
--------------------------------------------------------------------------------
 1 | const pannelIcon = document.querySelector(".sidebar-icon-item:nth-child(3)")
 2 | const wrapRightBox = document.querySelector(".wrap-right-box")
 3 | const wrap = document.querySelector(".wrap")
 4 | const headerPannelIcon = document.querySelector(".header-pannel-heading-icon")
 5 | const pannelFlashBox = document.querySelector(".pannel-flash-box")
 6 | 
 7 | //? if pannel opened return true else return false
 8 | const checkIsPannelOpen = () => {
 9 |     return wrapRightBox.classList.contains("active") ? true : false
10 | }
11 | 
12 | //? open pannel
13 | const openPannel = () => {
14 |     wrapRightBox.classList.add('active')
15 |     wrap.classList.add("active")
16 |     pannelIcon.innerHTML = `<span class="sidebar-icon-link"><i class="bi bi-box-arrow-in-right"></i></span>`
17 |     screen.availWidth > 1070 ? wrapRightBox.style.width = "500px" : wrapRightBox.style.width = "350px"
18 | }
19 | 
20 | //? close pannel
21 | const closePannel = () => {
22 |     wrapRightBox.classList.remove('active')
23 |     wrap.classList.remove("active")
24 |     pannelIcon.innerHTML = `<span class="sidebar-icon-link"><i class="bi bi-box-arrow-right"></i></span>`
25 |     wrapRightBox.style.width = 0
26 | }
27 | 
28 | pannelIcon.addEventListener("click", () => {
29 |     let pannelIsOpen = checkIsPannelOpen()
30 |     pannelIsOpen ? closePannel() : openPannel()
31 | })
32 | headerPannelIcon.addEventListener("click", closePannel)
33 | pannelFlashBox.addEventListener("click", openPannel)


--------------------------------------------------------------------------------
/public/content/js/tools/blur-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const blurInp = document.querySelector(".blur-inp")
  3 | const validationBlurElem = document.querySelector(".blur-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Blur = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     blur : 3,
 16 |     blurValidate : true
 17 | }
 18 | 
 19 | //? check blur init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 |     
 24 |     if (regexResult) {
 25 |         Blur.isInit = true
 26 |         Blur.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadBlurDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(blurInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Blur.isInit = false
 33 |         removeBlurDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable allInputs
 40 | const disableAllInputs = () =>
 41 |     blurInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     blurInp.disabled = false
 48 | 
 49 | //? upload blur data in inputs
 50 | const uploadBlurDataInInputs = () =>
 51 |     blurInp.value = Blur.blur
 52 | 
 53 | //? remove blur data from inputs
 54 | const removeBlurDataFromInputs = () =>
 55 |     blurInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     const regexCode = /^(0|\+?[1-9]{1,2}|\+?[1-9]{1}0)$/g // FIXME
 60 |     const regexResult = regexCode.test(value)
 61 | 
 62 |     if (regexResult) {
 63 |         Blur.blurValidate = true
 64 |         Blur.blur = Number(value)
 65 |         validationBlurElem.innerHTML = ""
 66 |         addStyleToImage()
 67 |     } else {
 68 |         Blur.blurValidate = false
 69 |         validationBlurElem.innerHTML = "Please select a positive number from 0 to 100"
 70 |     }
 71 |     
 72 | }
 73 | 
 74 | let StyleText = undefined
 75 | //? open generate pannel
 76 | const openGeneratePannel = () => {
 77 |     if (Blur.isInit) {
 78 |         if (Blur.blurValidate) {
 79 |             generateWrapBox.classList.add("active")
 80 |             StyleText = `.${Blur.elemClass} { filter: blur(${Blur.blur}px); }`
 81 |             codePennel.innerHTML = `.${Blur.elemClass} { <br>
 82 |                 &nbsp;&nbsp;&nbsp; filter: blur(${Blur.blur}px); <br>
 83 |             }`
 84 |         } else 
 85 |             alert("please enter the information correctly")
 86 |     } else
 87 |         alert("please complete the fields above")
 88 | }
 89 | 
 90 | //? copy to clipboard
 91 | const copyToClipboardText = () => {
 92 |     styleInp.value = StyleText
 93 |     navigator.clipboard.writeText(styleInp.value);
 94 | }
 95 | 
 96 | //? close generator pannel
 97 | const closeGeneratePannel = () => {
 98 |     generateWrapBox.classList.remove("active")
 99 | }
100 | 
101 | 
102 | //? add style to image
103 | const addStyleToImage = () => 
104 |     previewImage.style.filter = `blur(${Blur.blur}px)`
105 | 
106 | addStyleToImage()
107 | 
108 | elemClassNameInp.addEventListener("keyup", checkInit)
109 | blurInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
110 | cssCodeBtn.addEventListener("click", openGeneratePannel)
111 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
112 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/border-tool.js:
--------------------------------------------------------------------------------
  1 | import { makeResizableElem } from "./../modules/resizer.js"
  2 | import { createPickr } from "./../modules/pickr.js"
  3 | 
  4 | makeResizableElem(".resizable")
  5 | 
  6 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  7 | const widthInp = document.querySelector(".width-inp")
  8 | const validationBorderElem = document.querySelector(".valdiation-inputs-elem")
  9 | const resizableBox = document.querySelector('.resizable')
 10 | const colorPickr = document.querySelector(".color-picker")
 11 | const styleBox = document.querySelector(".style-box")
 12 | const styleMenuItemBox = document.querySelectorAll(".style-menu-item-box")
 13 | const cssCodeBtn = document.querySelector(".css-code-btn")
 14 | const generateWrapBox = document.querySelector(".generate-wrap-box")
 15 | const codePennel = document.querySelector(".code-pannel")
 16 | const styleInp = document.querySelector("#styleInp")
 17 | const copyToClipboard = document.querySelector(".clipboard-btn")
 18 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 19 | 
 20 | let Border = {
 21 |     elemClass: null,
 22 |     isInit: false,
 23 |     border: {
 24 |         width: 3,
 25 |         style: "solid",
 26 |         color: "#53535C"
 27 |     },
 28 |     widthValidate: true
 29 | }
 30 | 
 31 | let pickr = createPickr(".color-picker")
 32 | pickr.on('change', (color) => {
 33 |     let COLOR = color.toHEXA().toString()
 34 |     Border.border.color = COLOR
 35 |     colorPickr.style.background = COLOR
 36 |     addStyleToResizable()
 37 | })
 38 | 
 39 | //? check Border init and do validation for elem class name input
 40 | const checkInit = (e) => {
 41 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 42 |     const regexResult = regexCode.test(e.target.value)
 43 | 
 44 |     if (regexResult) {
 45 |         Border.isInit = true
 46 |         Border.elemClass = e.target.value.split(" ").join("-")
 47 |         uploadBorderDataInInputs()
 48 |         activeAllinputs()
 49 |         checkValidateInputs(widthInp.value)
 50 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 51 |     } else {
 52 |         Border.isInit = false
 53 |         removeBorderDataFromInputs()
 54 |         disableAllInputs()
 55 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 56 |     }
 57 | }
 58 | 
 59 | //? disable all inputs
 60 | const disableAllInputs = () => {
 61 |     widthInp.disabled = true
 62 |     colorPickr.disabled = true
 63 | }
 64 | disableAllInputs()
 65 | 
 66 | //? active all inputs
 67 | const activeAllinputs = () => {
 68 |     widthInp.disabled = false
 69 |     colorPickr.disabled = false
 70 | }
 71 | 
 72 | //? upload contrast data in inputs
 73 | const uploadBorderDataInInputs = () => {
 74 |     widthInp.value = Border.border.width
 75 | }
 76 | 
 77 | //? remove contrast data from inputs
 78 | const removeBorderDataFromInputs = () => {
 79 |     widthInp.value = ""
 80 | }
 81 | 
 82 | //? style box
 83 | const openStyleBox = (e) => {
 84 |     if (e.target.classList.contains("active")) {
 85 |         e.target.classList.remove("active")
 86 |     }
 87 |     else
 88 |         e.target.classList.add("active")
 89 | }
 90 | 
 91 | //? style menu item
 92 | styleMenuItemBox.forEach(item => {
 93 |     if (Border.widthValidate) {
 94 |         item.addEventListener("click", () => {
 95 |             styleMenuItemBox.forEach(allItem => {
 96 |                 if (allItem.innerText === item.innerText) {
 97 |                     if (checkValidation()) {
 98 |                         allItem.classList.add("active")
 99 |                         styleBox.children[0].innerHTML = allItem.innerText
100 |                         changeBorderStyle(allItem.innerText)
101 |                     } else {
102 |                         alert("you need to enter information corrcetly")
103 |                     }
104 |                 } else {
105 |                     if (checkValidation() === false) {
106 |                         if (!allItem.classList.contains("active"))
107 |                             allItem.classList.remove("active")
108 |                     } else 
109 |                         allItem.classList.remove("active")
110 |                 }
111 |             })
112 |         })
113 |     } 
114 | })
115 | 
116 | //? change border style
117 | const changeBorderStyle = (style) => {
118 |     Border.border.style = String(style).toLowerCase()
119 |     addStyleToResizable()
120 | }
121 | 
122 | //? check validation
123 | const checkValidation = () => {
124 |     return Border.isInit && Border.widthValidate ? true : false
125 | }
126 | 
127 | //? check validation
128 | const checkValidateInputs = (value) => {
129 |     if (!isNaN(value) && Number(widthInp.value) <= 30 && Number(widthInp.value) >= 0) {
130 |         Border.widthValidate = true
131 |         Border.border.width = Number(value)
132 |         validationBorderElem.innerHTML = ""
133 |         addStyleToResizable()
134 |     } else {
135 |         Border.widthValidate = false
136 |         validationBorderElem.innerHTML = "Please select a positive number from 0 to 30"
137 |     }
138 |     
139 | }
140 | 
141 | let text = undefined
142 | //? check all inputs and other elements validation is true and then open generate pannel
143 | const openGeneratePannel = () => {
144 |     if (Border.isInit) {
145 |         if (Border.widthValidate) {
146 |             generateWrapBox.classList.add("active")
147 |             text = `.${Border.elemClass} { border: ${Border.border.width}px ${Border.border.style} ${Border.border.color}; }`
148 |             
149 |             codePennel.innerHTML = `.${Border.elemClass} { <br>
150 |                 &nbsp;&nbspborder: ${Border.border.width}px ${Border.border.style} ${Border.border.color}; <br>
151 |             }`
152 |             
153 |         } else 
154 |             alert("Enter the information correctly")
155 |     } else
156 |         alert("Please enter the fields above")
157 | }
158 | 
159 | //? copy to clipboard
160 | const copyToClipboardText = () => {
161 |     styleInp.value = text
162 |     navigator.clipboard.writeText(styleInp.value);
163 | }
164 | 
165 | //? close generator pannel
166 | const closeGeneratePannel = () => {
167 |     generateWrapBox.classList.remove("active")
168 | }
169 | 
170 | //? add style to image
171 | const addStyleToResizable = () => {
172 |     resizableBox.style.border = `${Border.border.width}px ${Border.border.style} ${Border.border.color}`
173 | }
174 | 
175 | addStyleToResizable()
176 | 
177 | styleBox.addEventListener("click", openStyleBox)
178 | elemClassNameInp.addEventListener("keyup", checkInit)
179 | widthInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
180 | cssCodeBtn.addEventListener("click", openGeneratePannel)
181 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
182 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/brightness-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const brightnessInp = document.querySelector(".brightness-inp")
  3 | const validationBrightnessElem = document.querySelector(".brightness-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Brightness = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     brightness : 2,
 16 |     brightnessValidate : true
 17 | }
 18 | 
 19 | //? check brightness init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Brightness.isInit = true
 26 |         Brightness.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadBrightnessDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(brightnessInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Brightness.isInit = false
 33 |         removeBrightnessDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     brightnessInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     brightnessInp.disabled = false
 48 | 
 49 | //? upload brightness data in inputs
 50 | const uploadBrightnessDataInInputs = () =>
 51 |     brightnessInp.value = Brightness.brightness
 52 | 
 53 | //? remove brightness data from inputs
 54 | const removeBrightnessDataFromInputs = () => 
 55 |     brightnessInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     if (!isNaN(value) && Number(brightnessInp.value) <= 40 && Number(brightnessInp.value) >= 0) {
 60 |         Brightness.brightnessValidate = true
 61 |         Brightness.brightness = Number(value)
 62 |         validationBrightnessElem.innerHTML = ""
 63 |         addStyleToImage()
 64 |     } else {
 65 |         Brightness.brightnessValidate = false
 66 |         validationBrightnessElem.innerHTML = "Please select a positive number from 0 to 40"
 67 |     }
 68 |     
 69 | }
 70 | 
 71 | let StyleText = undefined
 72 | //? open generate pannel
 73 | const openGeneratePannel = () => {
 74 |     if (Brightness.isInit) {
 75 |         if (Brightness.brightnessValidate) {
 76 |             generateWrapBox.classList.add("active")
 77 |             StyleText = `.${Brightness.elemClass} { filter: brightness(${Brightness.brightness}); }`
 78 |             codePennel.innerHTML = `.${Brightness.elemClass} { <br>
 79 |                 &nbsp;&nbsp;&nbsp; filter: brightness(${Brightness.brightness}); <br>
 80 |             }`
 81 |         } else 
 82 |             alert("please enter the information correctly")
 83 |     } else
 84 |         alert("please complete the fields above")
 85 | }
 86 | 
 87 | //? copy to clipboard
 88 | const copyToClipboardText = () => {
 89 |     styleInp.value = StyleText
 90 |     navigator.clipboard.writeText(styleInp.value);
 91 | }
 92 | 
 93 | //? close generator pannel
 94 | const closeGeneratePannel = () => {
 95 |     generateWrapBox.classList.remove("active")
 96 | }
 97 | 
 98 | //? add style to image
 99 | const addStyleToImage = () =>
100 |     previewImage.style.filter = `brightness(${Brightness.brightness})`
101 | 
102 | addStyleToImage()
103 | 
104 | elemClassNameInp.addEventListener("keyup", checkInit)
105 | brightnessInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
106 | cssCodeBtn.addEventListener("click", openGeneratePannel)
107 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
108 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/contrast-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const contrastInp = document.querySelector(".contrast-inp")
  3 | const validationContrastElem = document.querySelector(".contrast-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Contrast = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     contrast : 2,
 16 |     contrastValidate : true
 17 | }
 18 | 
 19 | //? check contrast init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Contrast.isInit = true
 26 |         Contrast.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadContrastDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(contrastInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Contrast.isInit = false
 33 |         removeContrastDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     contrastInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     contrastInp.disabled = false
 48 | 
 49 | //? upload contrast data in inputs
 50 | const uploadContrastDataInInputs = () =>
 51 |     contrastInp.value = Contrast.contrast
 52 | 
 53 | //? remove contrast data from inputs
 54 | const removeContrastDataFromInputs = () => 
 55 |     contrastInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     if (!isNaN(value) && Number(contrastInp.value) <= 20 && Number(contrastInp.value) >= 0) {
 60 |         Contrast.contrastValidate = true
 61 |         Contrast.contrast = Number(value)
 62 |         validationContrastElem.innerHTML = ""
 63 |         addStyleToImage()
 64 |     } else {
 65 |         Contrast.contrastValidate = false
 66 |         validationContrastElem.innerHTML = "Please select a positive number from 0 to 20"
 67 |     }
 68 |     
 69 | }
 70 | 
 71 | let StyleText = undefined
 72 | //? open generate pannel
 73 | const openGeneratePannel = () => {
 74 |     if (Contrast.isInit) {
 75 |         if (Contrast.contrastValidate) {
 76 |             generateWrapBox.classList.add("active")
 77 |             StyleText = `.${Contrast.elemClass} { filter: contrast(${Contrast.contrast}); }`
 78 |             codePennel.innerHTML = `.${Contrast.elemClass} { <br>
 79 |                 &nbsp;&nbsp;&nbsp; filter: contrast(${Contrast.contrast}); <br>
 80 |             }`
 81 |         } else 
 82 |             alert("please enter the information correctly")
 83 |     } else
 84 |         alert("please complete the fields above")
 85 | }
 86 | 
 87 | //? copy to clipboard
 88 | const copyToClipboardText = () => {
 89 |     styleInp.value = StyleText
 90 |     navigator.clipboard.writeText(styleInp.value);
 91 | }
 92 | 
 93 | //? close generator pannel
 94 | const closeGeneratePannel = () => {
 95 |     generateWrapBox.classList.remove("active")
 96 | }
 97 | 
 98 | //? add style to image
 99 | const addStyleToImage = () =>
100 |     previewImage.style.filter = `contrast(${Contrast.contrast})`
101 | 
102 | addStyleToImage()
103 | 
104 | elemClassNameInp.addEventListener("keyup", checkInit)
105 | contrastInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
106 | cssCodeBtn.addEventListener("click", openGeneratePannel)
107 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
108 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/font-size-tool.js:
--------------------------------------------------------------------------------
  1 | //? get elements
  2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  3 | const cssCodeBtn = document.querySelector(".css-code-btn")
  4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  5 | const text = document.querySelector(".text")
  6 | const fontSizeInp = document.querySelector('.font-size-inp')
  7 | const fontSizeValidation = document.querySelector(".font-size-validation-elem")
  8 | const codePennel = document.querySelector(".code-pannel")
  9 | const styleInp = document.querySelector("#styleInp")
 10 | const copyToClipboard = document.querySelector(".clipboard-btn")
 11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 12 | 
 13 | //? Font Size object
 14 | let Font_Size = {
 15 |     elemClass: null,
 16 |     isInit: false,
 17 |     size: 50,
 18 |     fontSizeValidation: true
 19 | }
 20 | 
 21 | const checkElemClassNameInput = (e) => {
 22 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 23 |     let regexResult = regexCode.test(e.target.value)
 24 | 
 25 |     if (regexResult) {
 26 |         Font_Size.isInit = true
 27 |         Font_Size.elemClass = e.target.value.split(" ").join("-")
 28 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 29 | 
 30 |         activeAllInputs()
 31 |         uploadDataInInputs()
 32 |         addStyleToText()
 33 |         checkValidateInputs(fontSizeInp.value)
 34 |     } else {
 35 |         Font_Size.isInit = false
 36 |         disableAllInputs()
 37 |         removeDataFromInputs()
 38 |         removeStyleFromText()
 39 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 40 |     }
 41 | }
 42 | 
 43 | //? active inputs 
 44 | const activeAllInputs = () => 
 45 |     fontSizeInp.disabled = false
 46 | 
 47 | //? disable inputs
 48 | const disableAllInputs = () => 
 49 |     fontSizeInp.disabled = true
 50 | 
 51 | disableAllInputs()
 52 | 
 53 | //? upload data in inputs
 54 | const uploadDataInInputs = () => 
 55 |     fontSizeInp.value = Font_Size.size
 56 | 
 57 | //? remove data from inputs
 58 | const removeDataFromInputs = () => 
 59 |     fontSizeInp.value = ""
 60 | 
 61 | //? add style to Font Size box
 62 | const addStyleToText = () => 
 63 |     text.style.fontSize = `${Font_Size.size}px`
 64 | 
 65 | //? remove style from Font Size box
 66 | const removeStyleFromText = () =>
 67 |     text.style.fontSize = 4
 68 | 
 69 | let StyleText = undefined
 70 | //? open generate pannel
 71 | const openGeneratePannel = () => {
 72 |     if (Font_Size.isInit) {
 73 |         if (Font_Size.fontSizeValidation) {
 74 |             generateWrapBox.classList.add('active')
 75 |             StyleText = `.${Font_Size.elemClass} { font-size: ${Font_Size.size}px; }`
 76 |             codePennel.innerHTML = `.${Font_Size.elemClass} { <br>
 77 |                 &nbsp;&nbsp;&nbsp; font-size: ${Font_Size.size}px; <br>
 78 |             }`
 79 |         } else 
 80 |             alert("please complete the filds correctly")
 81 |     } else
 82 |         alert("please complete the fields above")
 83 | }
 84 | 
 85 | //? copy to clipboard
 86 | const copyToClipboardText = () => {
 87 |     styleInp.value = StyleText
 88 |     navigator.clipboard.writeText(styleInp.value);
 89 | }
 90 | 
 91 | //? close generator pannel
 92 | const closeGeneratePannel = () => {
 93 |     generateWrapBox.classList.remove("active")
 94 | }
 95 | 
 96 | //? check validation
 97 | const checkValidateInputs = (value) => {
 98 |     if (!isNaN(value) && Number(fontSizeInp.value) <= 70 && Number(fontSizeInp.value) >= 0) {
 99 |         Font_Size.fontSizeValidation = true
100 |         Font_Size.size = Number(value)
101 |         fontSizeValidation.innerHTML = ""
102 |         addStyleToText()
103 |     } else {
104 |         Font_Size.fontSizeValidation = false
105 |         fontSizeValidation.innerHTML = "Please select a positive number from 0 to 70"
106 |     }
107 |     
108 | }
109 | 
110 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
111 | cssCodeBtn.addEventListener("click", openGeneratePannel)
112 | fontSizeInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
113 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
114 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/font-weight-tool.js:
--------------------------------------------------------------------------------
 1 | //? get elements
 2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
 3 | const cssCodeBtn = document.querySelector(".css-code-btn")
 4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
 5 | const text = document.querySelector(".text")
 6 | const weightBox = document.querySelector(".weight-box")
 7 | const weightMenuItems = document.querySelectorAll(".weight-menu-item-box")
 8 | const codePennel = document.querySelector(".code-pannel")
 9 | const styleInp = document.querySelector("#styleInp")
10 | const copyToClipboard = document.querySelector(".clipboard-btn")
11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
12 | 
13 | //? Align object
14 | let Weight = {
15 |     elemClass: null,
16 |     isInit: false,
17 |     weight: "normal",
18 | }
19 | 
20 | const checkElemClassNameInput = (e) => {
21 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
22 |     let regexResult = regexCode.test(e.target.value)
23 | 
24 |     if (regexResult) {
25 |         Weight.isInit = true
26 |         Weight.elemClass = e.target.value.split(" ").join("-")
27 |         e.target.parentElement.previousElementSibling.innerHTML = ""
28 | 
29 |         addStyleToText()
30 |     } else {
31 |         Weight.isInit = false
32 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
33 |     }
34 | }
35 | 
36 | //? add style to color box
37 | const addStyleToText = () => 
38 |     text.style.fontWeight = `${Weight.weight}`
39 | 
40 | let StyleText = undefined
41 | //? open generate pannel
42 | const openGeneratePannel = () => {
43 |     if (Weight.isInit) {
44 |         generateWrapBox.classList.add('active')
45 |         StyleText = `.${Weight.elemClass} { font-weight: ${Weight.weight}; }`
46 |         codePennel.innerHTML = `.${Weight.elemClass} { <br>
47 |             &nbsp;&nbsp;&nbsp; font-weight: ${Weight.weight}; <br>
48 |         }`
49 |     } else
50 |         alert("please complete the fields above")
51 | }
52 | 
53 | //? copy to clipboard
54 | const copyToClipboardText = () => {
55 |     styleInp.value = StyleText
56 |     navigator.clipboard.writeText(styleInp.value);
57 | }
58 | 
59 | //? close generator pannel
60 | const closeGeneratePannel = () => {
61 |     generateWrapBox.classList.remove("active")
62 | }
63 | 
64 | //? check init
65 | const checkInit = () => {
66 |     return Weight.isInit ? true : false
67 | }
68 | 
69 | //? active align box
70 | const activeAlignBox = () => 
71 |     weightBox.classList.contains("active") ? weightBox.classList.remove("active") : weightBox.classList.add("active")
72 | 
73 | 
74 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
75 | elemClassNameInp.addEventListener("focus", () => weightBox.classList.remove("active"))
76 | cssCodeBtn.addEventListener("click", openGeneratePannel)
77 | weightBox.addEventListener("click", () => checkInit() ? activeAlignBox() : alert("please complete the fields correctly"))
78 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
79 | copyToClipboard.addEventListener("click", copyToClipboardText)
80 | 
81 | weightMenuItems.forEach(menuItem => {
82 |     menuItem.addEventListener("click", () => {
83 |         weightMenuItems.forEach(allMenuItems => {
84 |             if (allMenuItems.innerText === menuItem.innerText) {
85 |                 allMenuItems.classList.add('active')
86 |                 weightBox.children[0].innerText = allMenuItems.innerText
87 |                 Weight.weight = allMenuItems.innerText.toLowerCase()
88 |                 addStyleToText()
89 |             } else
90 |                 allMenuItems.classList.remove("active")
91 |         })
92 |     })
93 | })


--------------------------------------------------------------------------------
/public/content/js/tools/grayscale-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const grayscaleInp = document.querySelector(".grayscale-inp")
  3 | const validationGrayscaleElem = document.querySelector(".grayscale-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Grayscale = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     grayscale : 1,
 16 |     grayscaleValidate : true
 17 | }
 18 | 
 19 | //? check grayscale init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Grayscale.isInit = true
 26 |         Grayscale.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadGrayscaleDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(grayscaleInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Grayscale.isInit = false
 33 |         removeGrayscaleDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     grayscaleInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     grayscaleInp.disabled = false
 48 | 
 49 | //? upload grayscale data in inputs
 50 | const uploadGrayscaleDataInInputs = () =>
 51 |     grayscaleInp.value = Grayscale.grayscale
 52 | 
 53 | //? remove grayscale data from inputs
 54 | const removeGrayscaleDataFromInputs = () => 
 55 |     grayscaleInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     if (!isNaN(value) && Number(grayscaleInp.value) <= 1 && Number(grayscaleInp.value) >= 0 && grayscaleInp.value.length <= 4) {
 60 |         Grayscale.grayscaleValidate = true
 61 |         Grayscale.grayscale = Number(value)
 62 |         validationGrayscaleElem.innerHTML = ""
 63 |         addStyleToImage()
 64 |     } else {
 65 |         Grayscale.grayscaleValidate = false
 66 |         validationGrayscaleElem.innerHTML = "Please select a positive number from 0 to 1"
 67 |     }
 68 |     
 69 | }
 70 | 
 71 | let StyleText = undefined
 72 | //? open generate pannel
 73 | const openGeneratePannel = () => {
 74 |     if (Grayscale.isInit) {
 75 |         if (Grayscale.grayscaleValidate) {
 76 |             generateWrapBox.classList.add("active")
 77 |             StyleText = `.${Grayscale.elemClass} { filter: grayscale(${Grayscale.grayscale}); }`
 78 |             codePennel.innerHTML = `.${Grayscale.elemClass} { <br>
 79 |                 &nbsp;&nbsp;&nbsp; filter: grayscale(${Grayscale.grayscale}); <br>
 80 |             }`
 81 |         } else 
 82 |             alert("please enter the information correctly")
 83 |     } else
 84 |         alert("please complete the fields above")
 85 | }
 86 | 
 87 | //? copy to clipboard
 88 | const copyToClipboardText = () => {
 89 |     styleInp.value = StyleText
 90 |     navigator.clipboard.writeText(styleInp.value);
 91 | }
 92 | 
 93 | //? close generator pannel
 94 | const closeGeneratePannel = () => {
 95 |     generateWrapBox.classList.remove("active")
 96 | }
 97 | 
 98 | //? add style to image
 99 | const addStyleToImage = () =>
100 |     previewImage.style.filter = `grayscale(${Grayscale.grayscale})`
101 | 
102 | addStyleToImage()
103 | 
104 | elemClassNameInp.addEventListener("keyup", checkInit)
105 | grayscaleInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
106 | cssCodeBtn.addEventListener("click", openGeneratePannel)
107 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
108 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/hue-rotate-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const hueRotateInp = document.querySelector(".hue-rotate-inp")
  3 | const validationHueRotateElem = document.querySelector(".hue-rotate-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let HueRotate = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     hueRotate : 30,
 16 |     hueRotateValidate : true
 17 | }
 18 | 
 19 | //? check heu rotate init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         HueRotate.isInit = true
 26 |         HueRotate.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadHueRotateDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(hueRotateInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         HueRotate.isInit = false
 33 |         removeHueRotateDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     hueRotateInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     hueRotateInp.disabled = false
 48 | 
 49 | //? upload hue rotate data in inputs
 50 | const uploadHueRotateDataInInputs = () =>
 51 |     hueRotateInp.value = HueRotate.hueRotate
 52 | 
 53 | //? remove hue rotate data from inputs
 54 | const removeHueRotateDataFromInputs = () => 
 55 |     hueRotateInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     const regexCode = /^(0|\+?[1-9]{1,2}|\+?[1-9]{1}0)$/g // FIXME
 60 |     const regexResult = regexCode.test(value)
 61 | 
 62 |     if (regexResult) {
 63 |         HueRotate.hueRotateValidate = true
 64 |         HueRotate.hueRotate = Number(value)
 65 |         validationHueRotateElem.innerHTML = ""
 66 |         addStyleToImage()
 67 |     } else {
 68 |         HueRotate.hueRotateValidate = false
 69 |         validationHueRotateElem.innerHTML = "Please select a positive number"
 70 |     }
 71 |     
 72 | }
 73 | 
 74 | let StyleText = undefined
 75 | //? open generate pannel
 76 | const openGeneratePannel = () => {
 77 |     if (HueRotate.isInit) {
 78 |         if (HueRotate.hueRotateValidate) {
 79 |             generateWrapBox.classList.add("active")
 80 |             StyleText = `.${HueRotate.elemClass} { filter: hue-rotate(${HueRotate.hueRotate}deg); }`
 81 |             codePennel.innerHTML = `.${HueRotate.elemClass} { <br>
 82 |                 &nbsp;&nbsp;&nbsp; filter: hue-rotate(${HueRotate.hueRotate}deg); <br>
 83 |             }`
 84 |         } else 
 85 |             alert("please enter the information correctly")
 86 |     } else
 87 |         alert("please complete the fields above")
 88 | }
 89 | 
 90 | //? copy to clipboard
 91 | const copyToClipboardText = () => {
 92 |     styleInp.value = StyleText
 93 |     navigator.clipboard.writeText(styleInp.value);
 94 | }
 95 | 
 96 | //? close generator pannel
 97 | const closeGeneratePannel = () => {
 98 |     generateWrapBox.classList.remove("active")
 99 | }
100 | 
101 | //? add style to image
102 | const addStyleToImage = () =>
103 |     previewImage.style.filter = `hue-rotate(${HueRotate.hueRotate}deg)`
104 | 
105 | addStyleToImage()
106 | 
107 | elemClassNameInp.addEventListener("keyup", checkInit)
108 | cssCodeBtn.addEventListener("click", openGeneratePannel)
109 | hueRotateInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
110 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
111 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/invert-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const invertInp = document.querySelector(".invert-inp")
  3 | const validationInvertElem = document.querySelector(".invert-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Invert = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     invert : 1,
 16 |     invertValidate : true
 17 | }
 18 | 
 19 | //? check invert init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Invert.isInit = true
 26 |         Invert.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadInvertDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(invertInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Invert.isInit = false
 33 |         removeInvertDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     invertInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     invertInp.disabled = false
 48 | 
 49 | //? upload hue rotate data in inputs
 50 | const uploadInvertDataInInputs = () =>
 51 |     invertInp.value = Invert.invert
 52 | 
 53 | //? remove hue rotate data from inputs
 54 | const removeInvertDataFromInputs = () => 
 55 |     invertInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     if (!isNaN(value) && Number(invertInp.value) <= 1 && Number(invertInp.value) >= 0 && invertInp.value.length <= 4) {
 60 |         Invert.invertValidate = true
 61 |         Invert.invert = Number(value)
 62 |         validationInvertElem.innerHTML = ""
 63 |         addStyleToImage()
 64 |     } else {
 65 |         Invert.invertValidate = false
 66 |         validationInvertElem.innerHTML = "Please select a positive from 0 to 1"
 67 |     }
 68 |     
 69 | }
 70 | 
 71 | let StyleText = undefined
 72 | //? open generate pannel
 73 | const openGeneratePannel = () => {
 74 |     if (Invert.isInit) {
 75 |         if (Invert.invertValidate) {
 76 |             generateWrapBox.classList.add("active")
 77 |             StyleText = `.${Invert.elemClass} { filter: invert(${Invert.invert}); }`
 78 |             codePennel.innerHTML = `.${Invert.elemClass} { <br>
 79 |                 &nbsp;&nbsp;&nbsp; filter: invert(${Invert.invert}); <br>
 80 |             }`
 81 |         } else 
 82 |             alert("please enter the information correctly")
 83 |     } else
 84 |         alert("please complete the fields above")
 85 | }
 86 | 
 87 | //? copy to clipboard
 88 | const copyToClipboardText = () => {
 89 |     styleInp.value = StyleText
 90 |     navigator.clipboard.writeText(styleInp.value);
 91 | }
 92 | 
 93 | //? close generator pannel
 94 | const closeGeneratePannel = () => {
 95 |     generateWrapBox.classList.remove("active")
 96 | }
 97 | 
 98 | //? add style to image
 99 | const addStyleToImage = () =>
100 |     previewImage.style.filter = `invert(${Invert.invert})`
101 | 
102 | addStyleToImage()
103 | 
104 | elemClassNameInp.addEventListener("keyup", checkInit)
105 | cssCodeBtn.addEventListener("click", openGeneratePannel)
106 | invertInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
107 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
108 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/letter-spacing-tool.js:
--------------------------------------------------------------------------------
  1 | //? get elements
  2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  3 | const cssCodeBtn = document.querySelector(".css-code-btn")
  4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  5 | const text = document.querySelector(".text")
  6 | const letterSpacingInp = document.querySelector('.letter-spacing-inp')
  7 | const letterSpacingValidation = document.querySelector(".letter-spacing-validation-elem")
  8 | const codePennel = document.querySelector(".code-pannel")
  9 | const styleInp = document.querySelector("#styleInp")
 10 | const copyToClipboard = document.querySelector(".clipboard-btn")
 11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 12 | 
 13 | //? letter spacing object
 14 | let letter_spacing = {
 15 |     elemClass: null,
 16 |     isInit: false,
 17 |     space: 3,
 18 |     letterSpacingValidation: true
 19 | }
 20 | 
 21 | const checkElemClassNameInput = (e) => {
 22 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 23 |     let regexResult = regexCode.test(e.target.value)
 24 | 
 25 |     if (regexResult) {
 26 |         letter_spacing.isInit = true
 27 |         letter_spacing.elemClass = e.target.value.split(" ").join("-")
 28 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 29 | 
 30 |         activeAllInputs()
 31 |         uploadDataInInputs()
 32 |         addStyleToText()
 33 |         checkValidateInputs(letterSpacingInp.value)
 34 |     } else {
 35 |         letter_spacing.isInit = false
 36 |         disableAllInputs()
 37 |         removeDataFromInputs()
 38 |         removeStyleFromText()
 39 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 40 |     }
 41 | }
 42 | 
 43 | //? active inputs 
 44 | const activeAllInputs = () => 
 45 |     letterSpacingInp.disabled = false
 46 | 
 47 | //? disable inputs
 48 | const disableAllInputs = () => 
 49 |     letterSpacingInp.disabled = true
 50 | 
 51 | disableAllInputs()
 52 | 
 53 | //? upload data in inputs
 54 | const uploadDataInInputs = () => 
 55 |     letterSpacingInp.value = letter_spacing.space
 56 | 
 57 | //? remove data from inputs
 58 | const removeDataFromInputs = () => 
 59 |     letterSpacingInp.value = ""
 60 | 
 61 | //? add style to Font Size box
 62 | const addStyleToText = () => 
 63 |     text.style.letterSpacing = `${letter_spacing.space}px`
 64 | 
 65 | //? remove style from Font Size box
 66 | const removeStyleFromText = () =>
 67 |     text.style.letterSpacing = 3
 68 | 
 69 | let StyleText = undefined
 70 | //? open generate pannel
 71 | const openGeneratePannel = () => {
 72 |     if (letter_spacing.isInit) {
 73 |         if (letter_spacing.letterSpacingValidation) {
 74 |             generateWrapBox.classList.add('active')
 75 |             StyleText = `.${letter_spacing.elemClass} { letter-spacing: ${letter_spacing.space}px; }`
 76 |             codePennel.innerHTML = `.${letter_spacing.elemClass} { <br>
 77 |                 &nbsp;&nbsp;&nbsp; letter-spacing: ${letter_spacing.space}px; <br>
 78 |             }`
 79 |         } else 
 80 |             alert("please complete the filds correctly")
 81 |     } else
 82 |         alert("please complete the fields above")
 83 | }
 84 | 
 85 | //? copy to clipboard
 86 | const copyToClipboardText = () => {
 87 |     styleInp.value = StyleText
 88 |     navigator.clipboard.writeText(styleInp.value);
 89 | }
 90 | 
 91 | //? close generator pannel
 92 | const closeGeneratePannel = () => {
 93 |     generateWrapBox.classList.remove("active")
 94 | }
 95 | 
 96 | //? check validation
 97 | const checkValidateInputs = (value) => {
 98 |     if (!isNaN(value) && Number(letterSpacingInp.value) <= 30 && Number(letterSpacingInp.value) >= 0) {
 99 |         letter_spacing.letterSpacingValidation = true
100 |         letter_spacing.space = Number(value)
101 |         letterSpacingValidation.innerHTML = ""
102 |         addStyleToText()
103 |     } else {
104 |         letter_spacing.letterSpacingValidation = false
105 |         letterSpacingValidation.innerHTML = "Please select a positive number from 0 to 30"
106 |     }
107 |     
108 | }
109 | 
110 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
111 | cssCodeBtn.addEventListener("click", openGeneratePannel)
112 | letterSpacingInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
113 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
114 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/line-height-tool.js:
--------------------------------------------------------------------------------
  1 | //? get elements
  2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  3 | const cssCodeBtn = document.querySelector(".css-code-btn")
  4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  5 | const text = document.querySelector(".text")
  6 | const lineHeightInp = document.querySelector('.line-height-inp')
  7 | const lineHeightValidation = document.querySelector(".line-height-validation-elem")
  8 | const codePennel = document.querySelector(".code-pannel")
  9 | const styleInp = document.querySelector("#styleInp")
 10 | const copyToClipboard = document.querySelector(".clipboard-btn")
 11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 12 | 
 13 | //? line height object
 14 | let Line_Height = {
 15 |     elemClass: null,
 16 |     isInit: false,
 17 |     height: 70,
 18 |     lineHeightValidation: true
 19 | }
 20 | 
 21 | const checkElemClassNameInput = (e) => {
 22 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 23 |     let regexResult = regexCode.test(e.target.value)
 24 | 
 25 |     if (regexResult) {
 26 |         Line_Height.isInit = true
 27 |         Line_Height.elemClass = e.target.value.split(" ").join("-")
 28 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 29 | 
 30 |         activeAllInputs()
 31 |         uploadDataInInputs()
 32 |         addStyleToText()
 33 |         checkValidateInputs(lineHeightInp.value)
 34 |     } else {
 35 |         Line_Height.isInit = false
 36 |         disableAllInputs()
 37 |         removeDataFromInputs()
 38 |         removeStyleFromText()
 39 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 40 |     }
 41 | }
 42 | 
 43 | //? active inputs 
 44 | const activeAllInputs = () => 
 45 |     lineHeightInp.disabled = false
 46 | 
 47 | //? disable inputs
 48 | const disableAllInputs = () => 
 49 |     lineHeightInp.disabled = true
 50 | 
 51 | disableAllInputs()
 52 | 
 53 | //? upload data in inputs
 54 | const uploadDataInInputs = () => 
 55 |     lineHeightInp.value = Line_Height.height
 56 | 
 57 | //? remove data from inputs
 58 | const removeDataFromInputs = () => 
 59 |     lineHeightInp.value = ""
 60 | 
 61 | //? add style to Font Size box
 62 | const addStyleToText = () => 
 63 |     text.style.lineHeight = `${Line_Height.height}px`
 64 | 
 65 | //? remove style from Font Size box
 66 | const removeStyleFromText = () =>
 67 |     text.style.lineHeight = 3
 68 | 
 69 | let StyleText = undefined
 70 | //? open generate pannel
 71 | const openGeneratePannel = () => {
 72 |     if (Line_Height.isInit) {
 73 |         if (Line_Height.lineHeightValidation) {
 74 |             generateWrapBox.classList.add('active')
 75 |             StyleText = `.${Line_Height.elemClass} { line-height: ${Line_Height.height}px; }`
 76 |             codePennel.innerHTML = `.${Line_Height.elemClass} { <br>
 77 |                 &nbsp;&nbsp;&nbsp; line-height: ${Line_Height.height}px; <br>
 78 |             }`
 79 |         } else 
 80 |             alert("please complete the filds correctly")
 81 |     } else
 82 |         alert("please complete the fields above")
 83 | }
 84 | 
 85 | //? copy to clipboard
 86 | const copyToClipboardText = () => {
 87 |     styleInp.value = StyleText
 88 |     navigator.clipboard.writeText(styleInp.value);
 89 | }
 90 | 
 91 | //? close generator pannel
 92 | const closeGeneratePannel = () => {
 93 |     generateWrapBox.classList.remove("active")
 94 | }
 95 | 
 96 | //? check validation
 97 | const checkValidateInputs = (value) => {
 98 |     const regexCode = /^(0|\+?[1-9]{1,2}|\+?[1-9]{1}0)$/g // FIXME
 99 |     const regexResult = regexCode.test(value)
100 | 
101 |     if (regexResult) {
102 |         Line_Height.lineHeightValidation = true
103 |         Line_Height.height = Number(value)
104 |         lineHeightValidation.innerHTML = ""
105 |         addStyleToText()
106 |     } else {
107 |         Line_Height.lineHeightValidation = false
108 |         lineHeightValidation.innerHTML = "Please select a positive number from 0 to 100"
109 |     }
110 |     
111 | }
112 | 
113 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
114 | cssCodeBtn.addEventListener("click", openGeneratePannel)
115 | lineHeightInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
116 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
117 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/opacity-tool.js:
--------------------------------------------------------------------------------
  1 | import { makeResizableElem } from "./../modules/resizer.js"
  2 | import { createPickr } from "./../modules/pickr.js"
  3 | 
  4 | makeResizableElem(".resizable")
  5 | 
  6 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  7 | const opacityInp = document.querySelector(".opacity-inp")
  8 | const validationOpacityElem = document.querySelector(".opacity-validation-elem")
  9 | const resizableBox = document.querySelector(".resizable")
 10 | const cssCodeBtn = document.querySelector(".css-code-btn")
 11 | const generateWrapBox = document.querySelector(".generate-wrap-box")
 12 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 13 | const codePennel = document.querySelector(".code-pannel")
 14 | const styleInp = document.querySelector("#styleInp")
 15 | const copyToClipboard = document.querySelector(".clipboard-btn")
 16 | 
 17 | let Opacity = {
 18 |     elemClass: null,
 19 |     isInit: false,
 20 |     opacity : 1,
 21 |     opacityValidate : true
 22 | }
 23 | 
 24 | //? check Opacity init and do validation for elem class name input
 25 | const checkInit = (e) => {
 26 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 27 |     const regexResult = regexCode.test(e.target.value)
 28 | 
 29 |     if (regexResult) {
 30 |         Opacity.isInit = true
 31 |         Opacity.elemClass = e.target.value.split(" ").join("-")
 32 |         uploadOpacityDataInInputs()
 33 |         activeAllinputs()
 34 |         checkValidateInputs(opacityInp.value)
 35 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 36 |     } else {
 37 |         Opacity.isInit = false
 38 |         removeOpacityDataFromInputs()
 39 |         disableAllInputs()
 40 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 41 |     }
 42 | }
 43 | 
 44 | //? disable all inputs
 45 | const disableAllInputs = () => 
 46 |     opacityInp.disabled = true
 47 | 
 48 | disableAllInputs()
 49 | 
 50 | //? active all inputs
 51 | const activeAllinputs = () =>
 52 |     opacityInp.disabled = false
 53 | 
 54 | //? upload hue rotate data in inputs
 55 | const uploadOpacityDataInInputs = () =>
 56 |     opacityInp.value = Opacity.opacity
 57 | 
 58 | //? remove hue rotate data from inputs
 59 | const removeOpacityDataFromInputs = () => 
 60 |     opacityInp.value = ""
 61 | 
 62 | //? check validation
 63 | const checkValidateInputs = (value) => {
 64 |     if (!isNaN(value) && Number(opacityInp.value) <= 1 && Number(opacityInp.value) >= 0 && opacityInp.value.length <= 4) {
 65 |         Opacity.opacityValidate = true
 66 |         Opacity.opacity = Number(value)
 67 |         validationOpacityElem.innerHTML = ""
 68 |         addStyleToResizable()
 69 |     } else {
 70 |         Opacity.opacityValidate = false
 71 |         validationOpacityElem.innerHTML = "Please select a positive from 0 to 1"
 72 |     }
 73 |     
 74 | }
 75 | 
 76 | //? check all inputs and other elements validation is true and then open generate pannel
 77 | let text = undefined
 78 | const openGeneratePannel = () => {
 79 |     if (Opacity.isInit) {
 80 |         if (Opacity.opacityValidate) {
 81 |             generateWrapBox.classList.add("active")
 82 |         
 83 |             text = `.${Opacity.elemClass} {opacity: ${Opacity.opacity};}`
 84 |     
 85 |             codePennel.innerHTML = `.${Opacity.elemClass} { <br>
 86 |                 &nbsp;&nbsp;&nbsp; opacity: ${Opacity.opacity}; <br>
 87 |             }`
 88 |         } else 
 89 |             alert("Please enter the information correctly")
 90 |     } else
 91 |         alert("Please enter the fields above")
 92 | }
 93 | 
 94 | //? copy to clipboard
 95 | const copyToClipboardText = () => {
 96 |     styleInp.value = text
 97 |     navigator.clipboard.writeText(styleInp.value);
 98 | }
 99 | 
100 | //? close generator pannel
101 | const closeGeneratePannel = () => {
102 |     generateWrapBox.classList.remove("active")
103 | }
104 | 
105 | //? add style to image
106 | const addStyleToResizable = () =>
107 |     resizableBox.style.filter = `opacity(${Opacity.opacity})`
108 | 
109 | addStyleToResizable()
110 | 
111 | elemClassNameInp.addEventListener("keyup", checkInit)
112 | opacityInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
113 | cssCodeBtn.addEventListener("click", openGeneratePannel)
114 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
115 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/saturate-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const saturateInp = document.querySelector(".saturate-inp")
  3 | const validationSaturateElem = document.querySelector(".saturate-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Saturate = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     saturate : 3,
 16 |     saturateValidate : true
 17 | }
 18 | 
 19 | //? check saturate init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Saturate.isInit = true
 26 |         Saturate.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadSaturateDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(saturateInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Saturate.isInit = false
 33 |         removeSaturateDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     saturateInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     saturateInp.disabled = false
 48 | 
 49 | //? upload saturate data in inputs
 50 | const uploadSaturateDataInInputs = () =>
 51 |     saturateInp.value = Saturate.saturate
 52 | 
 53 | //? remove saturate data from inputs
 54 | const removeSaturateDataFromInputs = () => 
 55 |     saturateInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     const regexCode = /^(0|\+?[1-9]{1,2}|\+?[1-9]{1}0)$/g // FIXME
 60 |     const regexResult = regexCode.test(value)
 61 | 
 62 |     if (regexResult) {
 63 |         Saturate.saturateValidate = true
 64 |         Saturate.saturate = Number(value)
 65 |         validationSaturateElem.innerHTML = ""
 66 |         addStyleToImage()
 67 |     } else {
 68 |         Saturate.saturateValidate = false
 69 |         validationSaturateElem.innerHTML = "Please select a positive from 0 to 100"
 70 |     }
 71 |     
 72 | }
 73 | 
 74 | let StyleText = undefined
 75 | //? open generate pannel
 76 | const openGeneratePannel = () => {
 77 |     if (Saturate.isInit) {
 78 |         if (Saturate.saturateValidate) {
 79 |             generateWrapBox.classList.add("active")
 80 |             StyleText = `.${Saturate.elemClass} { filter: saturate(${Saturate.saturate}); }`
 81 |             codePennel.innerHTML = `.${Saturate.elemClass} { <br>
 82 |                 &nbsp;&nbsp;&nbsp; filter: saturate(${Saturate.saturate}); <br>
 83 |             }`
 84 |         } else 
 85 |             alert("please enter the information correctly")
 86 |     } else
 87 |         alert("please complete the fields above")
 88 | }
 89 | 
 90 | //? copy to clipboard
 91 | const copyToClipboardText = () => {
 92 |     styleInp.value = StyleText
 93 |     navigator.clipboard.writeText(styleInp.value);
 94 | }
 95 | 
 96 | //? close generator pannel
 97 | const closeGeneratePannel = () => {
 98 |     generateWrapBox.classList.remove("active")
 99 | }
100 | 
101 | //? add style to image
102 | const addStyleToImage = () =>
103 |     previewImage.style.filter = `saturate(${Saturate.saturate})` // FIXME
104 | 
105 | addStyleToImage()
106 | 
107 | elemClassNameInp.addEventListener("keyup", checkInit)
108 | cssCodeBtn.addEventListener("click", openGeneratePannel)
109 | saturateInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
110 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
111 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/sepia-tool.js:
--------------------------------------------------------------------------------
  1 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  2 | const sepiaInp = document.querySelector(".sepia-inp")
  3 | const validationSepiaElem = document.querySelector(".sepia-validation-elem")
  4 | const previewImage = document.querySelector(".img-left")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const codePennel = document.querySelector(".code-pannel")
  8 | const styleInp = document.querySelector("#styleInp")
  9 | const copyToClipboard = document.querySelector(".clipboard-btn")
 10 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 11 | 
 12 | let Sepia = {
 13 |     elemClass: null,
 14 |     isInit: false,
 15 |     sepia : 1,
 16 |     sepiaValidate : true
 17 | }
 18 | 
 19 | //? check sepia init and do validation for elem class name input
 20 | const checkInit = (e) => {
 21 |     const regexCode = /^[a-zA-Z" "]{1,30}$/g
 22 |     const regexResult = regexCode.test(e.target.value)
 23 | 
 24 |     if (regexResult) {
 25 |         Sepia.isInit = true
 26 |         Sepia.elemClass = e.target.value.split(" ").join("-")
 27 |         uploadSepiaDataInInputs()
 28 |         activeAllinputs()
 29 |         checkValidateInputs(sepiaInp.value)
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Sepia.isInit = false
 33 |         removeSepiaDataFromInputs()
 34 |         disableAllInputs()
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? disable all inputs
 40 | const disableAllInputs = () => 
 41 |     sepiaInp.disabled = true
 42 | 
 43 | disableAllInputs()
 44 | 
 45 | //? active all inputs
 46 | const activeAllinputs = () =>
 47 |     sepiaInp.disabled = false
 48 | 
 49 | //? upload sepia data in inputs
 50 | const uploadSepiaDataInInputs = () =>
 51 |     sepiaInp.value = Sepia.sepia
 52 | 
 53 | //? remove sepia data from inputs
 54 | const removeSepiaDataFromInputs = () => 
 55 |     sepiaInp.value = ""
 56 | 
 57 | //? check validation
 58 | const checkValidateInputs = (value) => {
 59 |     if (!isNaN(value) && Number(sepiaInp.value) <= 1 && Number(sepiaInp.value) >= 0 && sepiaInp.value.length <= 4) {
 60 |         Sepia.sepiaValidate = true
 61 |         Sepia.sepia = Number(value)
 62 |         validationSepiaElem.innerHTML = ""
 63 |         addStyleToImage()
 64 |     } else {
 65 |         Sepia.sepiaValidate = false
 66 |         validationSepiaElem.innerHTML = "Please select a positive from 0 to 1"
 67 |     }
 68 |     
 69 | }
 70 | 
 71 | let StyleText = undefined
 72 | //? open generate pannel
 73 | const openGeneratePannel = () => {
 74 |     if (Sepia.isInit) {
 75 |         if (Sepia.sepiaValidate) {
 76 |             generateWrapBox.classList.add("active")
 77 |             StyleText = `.${Sepia.elemClass} { filter: sepia(${Sepia.sepia}); }`
 78 |             codePennel.innerHTML = `.${Sepia.elemClass} { <br>
 79 |                 &nbsp;&nbsp;&nbsp; filter: sepia(${Sepia.sepia}); <br>
 80 |             }`
 81 |         } else 
 82 |             alert("please enter the information correctly")
 83 |     } else
 84 |         alert("please complete the fields above")
 85 | }
 86 | 
 87 | //? copy to clipboard
 88 | const copyToClipboardText = () => {
 89 |     styleInp.value = StyleText
 90 |     navigator.clipboard.writeText(styleInp.value);
 91 | }
 92 | 
 93 | //? close generator pannel
 94 | const closeGeneratePannel = () => {
 95 |     generateWrapBox.classList.remove("active")
 96 | }
 97 | 
 98 | //? add style to image
 99 | const addStyleToImage = () =>
100 |     previewImage.style.filter = `sepia(${Sepia.sepia})` // FIXME
101 | 
102 | addStyleToImage()
103 | 
104 | elemClassNameInp.addEventListener("keyup", checkInit)
105 | cssCodeBtn.addEventListener("click", openGeneratePannel)
106 | sepiaInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
107 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
108 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/text-align-tool.js:
--------------------------------------------------------------------------------
  1 | //? get elements
  2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  3 | const cssCodeBtn = document.querySelector(".css-code-btn")
  4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  5 | const text = document.querySelector(".text")
  6 | const alignBox = document.querySelector(".align-box")
  7 | const arrowRight = document.querySelector(".arrow-align-right")
  8 | const arrowLeft = document.querySelector(".arrow-align-left")
  9 | const alignMenuItems = document.querySelectorAll(".align-menu-item-box")
 10 | const codePennel = document.querySelector(".code-pannel")
 11 | const styleInp = document.querySelector("#styleInp")
 12 | const copyToClipboard = document.querySelector(".clipboard-btn")
 13 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 14 | 
 15 | //? Align object
 16 | let Align = {
 17 |     elemClass: null,
 18 |     isInit: false,
 19 |     align: "center",
 20 |     direction: "ltr"
 21 | }
 22 | 
 23 | const checkElemClassNameInput = (e) => {
 24 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 25 |     let regexResult = regexCode.test(e.target.value)
 26 | 
 27 |     if (regexResult) {
 28 |         Align.isInit = true
 29 |         Align.elemClass = e.target.value.split(" ").join("-")
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 | 
 32 |         addStyleToText()
 33 |     } else {
 34 |         Align.isInit = false
 35 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 36 |     }
 37 | }
 38 | 
 39 | //? add style to color box
 40 | const addStyleToText = () => 
 41 |     text.style.textAlign = `${Align.align}`
 42 | 
 43 | let StyleText = undefined
 44 | //? open generate pannel
 45 | const openGeneratePannel = () => {
 46 |     if (Align.isInit) {
 47 |         generateWrapBox.classList.add('active')
 48 |         StyleText = `.${Align.elemClass} { direction: ${Align.direction}; text-align: ${Align.align}; }`
 49 |         codePennel.innerHTML = `.${Align.elemClass} { <br>
 50 |             &nbsp;&nbsp;&nbsp; direction: ${Align.direction}; <br> 
 51 |             &nbsp;&nbsp;&nbsp; text-align: ${Align.align}; <br>
 52 |         }`
 53 |     } else
 54 |         alert("please complete the fields above")
 55 | }
 56 | 
 57 | //? copy to clipboard
 58 | const copyToClipboardText = () => {
 59 |     styleInp.value = StyleText
 60 |     navigator.clipboard.writeText(styleInp.value);
 61 | }
 62 | 
 63 | //? close generator pannel
 64 | const closeGeneratePannel = () => {
 65 |     generateWrapBox.classList.remove("active")
 66 | }
 67 | 
 68 | //? init arrow
 69 | const initArrow = (right = true) => {
 70 |     if (right) {
 71 |         Align.direction = "rtl"
 72 |         arrowRight.innerHTML = '<i class="bi bi-arrow-right-square-fill"></i>'
 73 |         arrowLeft.innerHTML = '<i class="bi bi-arrow-left-square"></i>'
 74 |         text.style.direction = "rtl"
 75 |     } else {
 76 |         Align.direction = "ltr"
 77 |         arrowLeft.innerHTML = '<i class="bi bi-arrow-left-square-fill"></i>'
 78 |         arrowRight.innerHTML = '<i class="bi bi-arrow-right-square"></i>'
 79 |         text.style.direction = "ltr"
 80 |     }
 81 | }
 82 | 
 83 | //? check init
 84 | const checkInit = () => {
 85 |     return Align.isInit ? true : false
 86 | }
 87 | 
 88 | //? active align box
 89 | const activeAlignBox = () => 
 90 |     alignBox.classList.contains("active") ? alignBox.classList.remove("active") : alignBox.classList.add("active")
 91 | 
 92 | 
 93 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
 94 | elemClassNameInp.addEventListener("focus", () => alignBox.classList.remove("active"))
 95 | cssCodeBtn.addEventListener("click", openGeneratePannel)
 96 | alignBox.addEventListener("click", () => checkInit() ? activeAlignBox() : alert("please complete the fields correctly"))
 97 | arrowRight.addEventListener("click",() => checkInit() ? initArrow() : alert("please complete the fields correctly"))
 98 | arrowLeft.addEventListener("click", () => checkInit() ? initArrow(false) : alert("please complete the fields correctly"))
 99 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
100 | copyToClipboard.addEventListener("click", copyToClipboardText)
101 | 
102 | alignMenuItems.forEach(menuItem => {
103 |     menuItem.addEventListener("click", () => {
104 |         alignMenuItems.forEach(allMenuItems => {
105 |             if (allMenuItems.innerText === menuItem.innerText) {
106 |                 allMenuItems.classList.add('active')
107 |                 alignBox.children[0].innerText = allMenuItems.innerText
108 |                 Align.align = allMenuItems.innerText.toLowerCase()
109 |                 addStyleToText()
110 |             } else
111 |                 allMenuItems.classList.remove("active")
112 |         })
113 |     })
114 | })


--------------------------------------------------------------------------------
/public/content/js/tools/text-color-tool.js:
--------------------------------------------------------------------------------
  1 | import { createPickr } from "./../modules/pickr.js"
  2 | 
  3 | //? get elements
  4 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const text = document.querySelector(".text")
  8 | const colorPicker = document.querySelector(".color-picker")
  9 | const codePennel = document.querySelector(".code-pannel")
 10 | const styleInp = document.querySelector("#styleInp")
 11 | const copyToClipboard = document.querySelector(".clipboard-btn")
 12 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 13 | 
 14 | let pickr = createPickr(".color-picker", "#FFFFFF")
 15 | pickr.on('change', (color) => {
 16 |     let COLOR = color.toHEXA().toString()
 17 |     Color.color = COLOR
 18 |     colorPicker.style.background = COLOR
 19 |     addStyleToText()
 20 | })
 21 | 
 22 | //? Color object
 23 | let Color = {
 24 |     elemClass: null,
 25 |     isInit: false,
 26 |     color: "#FFFFFF",
 27 | }
 28 | 
 29 | const checkElemClassNameInput = (e) => {
 30 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 31 |     let regexResult = regexCode.test(e.target.value)
 32 | 
 33 |     if (regexResult) {
 34 |         Color.isInit = true
 35 |         Color.elemClass = e.target.value.split(" ").join("-")
 36 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 37 | 
 38 |         activeAllInputs()
 39 |         uploadDataInInputs()
 40 |         addStyleToText()
 41 |     } else {
 42 |         Color.isInit = false
 43 |         disableAllInputs()
 44 |         removeDataFromInputs()
 45 |         removeStyleFromText()
 46 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 47 |     }
 48 | }
 49 | 
 50 | //? active inputs 
 51 | const activeAllInputs = () => 
 52 |     colorPicker.disabled = false
 53 | 
 54 | //? disable inputs
 55 | const disableAllInputs = () => 
 56 |     colorPicker.disabled = true
 57 | 
 58 | disableAllInputs()
 59 | 
 60 | //? upload data in inputs
 61 | const uploadDataInInputs = () => 
 62 |     colorPicker.style.background = `${Color.color}`
 63 | 
 64 | //? remove data from inputs
 65 | const removeDataFromInputs = () => 
 66 |     colorPicker.style.background = "#FFFFFF"
 67 | 
 68 | //? add style to color box
 69 | const addStyleToText = () => 
 70 |     text.style.color = `${Color.color}`
 71 | 
 72 | //? remove style from color box
 73 | const removeStyleFromText = () =>
 74 |     text.style.color = ""
 75 | 
 76 | let StyleText = undefined
 77 | //? open generate pannel
 78 | const openGeneratePannel = () => {
 79 |     if (Color.isInit) {
 80 |         generateWrapBox.classList.add('active')
 81 |         StyleText = `.${Color.elemClass} { color: ${Color.color}; }`
 82 |         codePennel.innerHTML = `.${Color.elemClass} { <br>
 83 |             &nbsp;&nbsp;&nbsp; color: ${Color.color}; <br>
 84 |         }`
 85 |     } else
 86 |         alert("please complete the fields above")
 87 | }
 88 | 
 89 | //? copy to clipboard
 90 | const copyToClipboardText = () => {
 91 |     styleInp.value = StyleText
 92 |     navigator.clipboard.writeText(styleInp.value);
 93 | }
 94 | 
 95 | //? close generator pannel
 96 | const closeGeneratePannel = () => {
 97 |     generateWrapBox.classList.remove("active")
 98 | }
 99 | 
100 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
101 | cssCodeBtn.addEventListener("click", openGeneratePannel)
102 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
103 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/text-decoration-tool.js:
--------------------------------------------------------------------------------
  1 | import { createPickr } from "../modules/pickr.js"
  2 | 
  3 | //? get elements
  4 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const text = document.querySelector(".text")
  8 | const decorationInp = document.querySelector('.decoration-inp')
  9 | const decorationValidation = document.querySelector(".decoration-validation-elem")
 10 | const picker = document.querySelector(".color-picker")
 11 | const decorationBoxes = document.querySelectorAll(".decoration-box")
 12 | const decorationMenuItems = document.querySelectorAll(".decoration-menu-item-box")
 13 | const codePennel = document.querySelector(".code-pannel")
 14 | const styleInp = document.querySelector("#styleInp")
 15 | const copyToClipboard = document.querySelector(".clipboard-btn")
 16 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 17 | 
 18 | //? Decoration object
 19 | let Decoration = {
 20 |     elemClass: null,
 21 |     isInit: false,
 22 |     text: {
 23 |         thickness: 0,
 24 |         decorationStyle: "none",
 25 |         decorationLine: "none",
 26 |         color: "#FFFFFF",
 27 |     },
 28 |     thicknessValidation: true,
 29 | }
 30 | 
 31 | let colorPicker = createPickr(".color-picker", "#FFFFFF")
 32 | colorPicker.on('change', (color) => {
 33 |     let COLOR = color.toHEXA().toString()
 34 |     Decoration.text.color = COLOR
 35 |     picker.style.background = COLOR
 36 |     addStyleToText()
 37 | })
 38 | 
 39 | const checkElemClassNameInput = (e) => {
 40 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 41 |     let regexResult = regexCode.test(e.target.value)
 42 | 
 43 |     if (regexResult) {
 44 |         Decoration.isInit = true
 45 |         Decoration.elemClass = e.target.value.split(" ").join("-")
 46 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 47 | 
 48 |         activeAllInputs()
 49 |         uploadDataInInputs()
 50 |     } else {
 51 |         Decoration.isInit = false
 52 |         disableAllInputs()
 53 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 54 |     }
 55 | }
 56 | 
 57 | //? active inputs 
 58 | const activeAllInputs = () => {
 59 |     decorationInp.disabled = false
 60 |     picker.disabled = false
 61 | }
 62 | 
 63 | //? disable inputs
 64 | const disableAllInputs = () => {
 65 |     decorationInp.disabled = true
 66 |     picker.disabled = true
 67 | }
 68 | 
 69 | disableAllInputs()
 70 | 
 71 | //? add style to Font Size box
 72 | const addStyleToText = () => {
 73 |     let decorationObj = Decoration.text
 74 |     text.style.textDecoration = `${decorationObj.thickness}px 
 75 |                                 ${decorationObj.decorationStyle} 
 76 |                                 ${decorationObj.decorationLine} 
 77 |                                 ${decorationObj.color}`
 78 | }
 79 | 
 80 | //? upload data in inputs
 81 | const uploadDataInInputs = () => 
 82 |     decorationInp.value = Decoration.text.thickness
 83 | 
 84 | let StyleText = undefined
 85 | //? open generate pannel
 86 | const openGeneratePannel = () => {
 87 |     if (Decoration.isInit) {
 88 |         if (Decoration.thicknessValidation) {
 89 |             generateWrapBox.classList.add('active')
 90 |             StyleText = `.${Decoration.elemClass} { text-decoration: ${Decoration.text.decorationLine} ${Decoration.text.decorationStyle} ${Decoration.text.thickness}px ${Decoration.text.color}; }`
 91 |             codePennel.innerHTML = `.${Decoration.elemClass} { <br>
 92 |                 &nbsp;&nbsp;&nbsp;text-decoration: <br> 
 93 |                 &nbsp;&nbsp;&nbsp;${Decoration.text.decorationLine}
 94 |                 ${Decoration.text.decorationStyle}
 95 |                 ${Decoration.text.thickness}px
 96 |                 ${Decoration.text.color}; <br>
 97 |             }`
 98 |         } else 
 99 |             alert("please complete the filds correctly")
100 |     } else
101 |         alert("please complete the fields above")
102 | }
103 | 
104 | //? copy to clipboard
105 | const copyToClipboardText = () => {
106 |     styleInp.value = StyleText
107 |     navigator.clipboard.writeText(styleInp.value);
108 | }
109 | 
110 | //? close generator pannel
111 | const closeGeneratePannel = () => {
112 |     generateWrapBox.classList.remove("active")
113 | }
114 | 
115 | 
116 | //? check validation
117 | const checkValidateInputs = (value) => {
118 |     if (!isNaN(value) && Number(decorationInp.value) <= 15 && Number(decorationInp.value) >= 0) {
119 |         Decoration.thicknessValidation = true
120 |         Decoration.text.thickness = Number(value)
121 |         decorationValidation.innerHTML = ""
122 |         addStyleToText()
123 |     } else {
124 |         Decoration.thicknessValidation = false
125 |         decorationValidation.innerHTML = "Please select a positive number from 0 to 15"
126 |     }
127 | }
128 | 
129 | //? decoration
130 | const decoration = (parent) => {
131 |     if (Decoration.isInit) {
132 |         if (Decoration.thicknessValidation) {
133 |             activeDecorationBox(parent)
134 |             let decParentElement = parent.parentElement.parentElement.previousElementSibling
135 |             let text = parent.innerText.toLowerCase()
136 |             decParentElement.children[0].innerText = text
137 |             if (decParentElement.dataset.decoration === "style") {
138 |                 Decoration.text.decorationStyle = text
139 |                 addStyleToText()
140 |             } else {
141 |                 Decoration.text.decorationLine = text
142 |                 addStyleToText()
143 |             }
144 |         } else 
145 |             alert("please complete the fileds correctly")
146 |     } else 
147 |         alert("please complete the filed")
148 | }
149 | 
150 | //? active decoration box
151 | const activeDecorationBox = (element) => {
152 |     decorationMenuItems.forEach(docorationMenuItem => {
153 |         if (docorationMenuItem.innerText === element.innerText)
154 |             docorationMenuItem.classList.add("active")
155 |         else 
156 |             docorationMenuItem.classList.remove("active")
157 |     })
158 | }
159 | 
160 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
161 | cssCodeBtn.addEventListener("click", openGeneratePannel)
162 | decorationInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
163 | decorationMenuItems.forEach(decorationMenuItem => decorationMenuItem.addEventListener("click", () => decoration(decorationMenuItem)))
164 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
165 | copyToClipboard.addEventListener("click", copyToClipboardText)
166 | 
167 | decorationBoxes.forEach(decorationBox => {
168 |     decorationBox.addEventListener("click", () => {
169 |         if (Decoration.isInit) {
170 |             if (Decoration.thicknessValidation) {
171 |                 if (!decorationBox.classList.contains("active"))
172 |                     decorationBox.classList.add("active")
173 |                 else
174 |                     decorationBox.classList.remove("active")
175 |             } else 
176 |                 alert("please complete the fileds correctly")
177 |         } else 
178 |             alert("please complete the filed")
179 |     })
180 | })


--------------------------------------------------------------------------------
/public/content/js/tools/text-overflow-tool.js:
--------------------------------------------------------------------------------
  1 | //? get elements
  2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  3 | const cssCodeBtn = document.querySelector(".css-code-btn")
  4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  5 | const text = document.querySelector(".text")
  6 | const overflowBox = document.querySelector(".overflow-box")
  7 | const arrowRight = document.querySelector(".arrow-align-right")
  8 | const arrowLeft = document.querySelector(".arrow-align-left")
  9 | const overflowMenuItems = document.querySelectorAll(".overflow-menu-item-box")
 10 | const codePennel = document.querySelector(".code-pannel")
 11 | const styleInp = document.querySelector("#styleInp")
 12 | const copyToClipboard = document.querySelector(".clipboard-btn")
 13 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 14 | 
 15 | //? Overflow obj
 16 | let Overflow = {
 17 |     elemClass: null,
 18 |     isInit: false,
 19 |     overflow: "center",
 20 |     direction: "ltr"
 21 | }
 22 | 
 23 | const checkElemClassNameInput = (e) => {
 24 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 25 |     let regexResult = regexCode.test(e.target.value)
 26 | 
 27 |     if (regexResult) {
 28 |         Overflow.isInit = true
 29 |         Overflow.elemClass = e.target.value.split(" ").join("-")
 30 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 31 |     } else {
 32 |         Overflow.isInit = false
 33 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 34 |     }
 35 | }
 36 | 
 37 | //? add style to color box
 38 | const addStyleToText = () => {
 39 |     if (Overflow.overflow !== "without style") {
 40 |         text.style.overflow = "hidden"
 41 |         text.style.whiteSpace = "nowrap"
 42 |         text.style.textOverflow = `${Overflow.overflow}`
 43 |     } else {
 44 |         text.style.overflow = ""
 45 |         text.style.whiteSpace = ""
 46 |         text.style.textOverflow = ""
 47 |     }
 48 | }
 49 | 
 50 | //? open generate pannel
 51 | const openGeneratePannel = () => {
 52 |     if (Overflow.isInit) {
 53 |         generateWrapBox.classList.add('active')
 54 |         StyleText = `.${Overflow.elemClass} { direction: ${Overflow.direction}; text-overflow: ${Overflow.overflow}; }`
 55 |         codePennel.innerHTML = `.${Overflow.elemClass} { <br>
 56 |             &nbsp;&nbsp;&nbsp; direction: ${Overflow.direction}; <br>
 57 |             &nbsp;&nbsp;&nbsp; text-overflow: ${Overflow.overflow}; <br>
 58 |         }`
 59 |     } else
 60 |         alert("please complete the fields above")
 61 | }
 62 | 
 63 | //? copy to clipboard
 64 | const copyToClipboardText = () => {
 65 |     styleInp.value = StyleText
 66 |     navigator.clipboard.writeText(styleInp.value);
 67 | }
 68 | 
 69 | //? close generator pannel
 70 | const closeGeneratePannel = () => {
 71 |     generateWrapBox.classList.remove("active")
 72 | }
 73 | 
 74 | 
 75 | //? init arrow
 76 | const initArrow = (right = true) => {
 77 |     if (right) {
 78 |         Overflow.direction = "rtl"
 79 |         arrowRight.innerHTML = '<i class="bi bi-arrow-right-square-fill"></i>'
 80 |         arrowLeft.innerHTML = '<i class="bi bi-arrow-left-square"></i>'
 81 |         text.style.direction = "rtl"
 82 |     } else {
 83 |         Overflow.direction = "ltr"
 84 |         arrowLeft.innerHTML = '<i class="bi bi-arrow-left-square-fill"></i>'
 85 |         arrowRight.innerHTML = '<i class="bi bi-arrow-right-square"></i>'
 86 |         text.style.direction = "ltr"
 87 |     }
 88 | }
 89 | 
 90 | //? check init
 91 | const checkInit = () => {
 92 |     return Overflow.isInit ? true : false
 93 | }
 94 | 
 95 | //? active align box
 96 | const activeOverflowBox = () => 
 97 |    overflowBox.classList.contains("active") ?overflowBox.classList.remove("active") :overflowBox.classList.add("active")
 98 | 
 99 | 
100 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
101 | elemClassNameInp.addEventListener("focus", () => overflowBox.classList.remove("active"))
102 | cssCodeBtn.addEventListener("click", openGeneratePannel)
103 | overflowBox.addEventListener("click", () => checkInit() ? activeOverflowBox() : alert("please complete the fields correctly"))
104 | arrowRight.addEventListener("click",() => checkInit() ? initArrow() : alert("please complete the fields correctly"))
105 | arrowLeft.addEventListener("click", () => checkInit() ? initArrow(false) : alert("please complete the fields correctly"))
106 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
107 | copyToClipboard.addEventListener("click", copyToClipboardText)
108 | 
109 | overflowMenuItems.forEach(menuItem => {
110 |     menuItem.addEventListener("click", () => {
111 |         overflowMenuItems.forEach(allMenuItems => {
112 |             if (allMenuItems.innerText === menuItem.innerText) {
113 |                 allMenuItems.classList.add('active')
114 |                 overflowBox.children[0].innerText = allMenuItems.innerText
115 |                 Overflow.overflow = allMenuItems.innerText.toLowerCase()
116 |                 addStyleToText()
117 |             } else
118 |                 allMenuItems.classList.remove("active")
119 |         })
120 |     })
121 | })


--------------------------------------------------------------------------------
/public/content/js/tools/text-stroke-tool.js:
--------------------------------------------------------------------------------
  1 | import { createPickr } from "./../modules/pickr.js"
  2 | 
  3 | //? get elements
  4 | const elemClassNameInp = document.querySelector(".element-class-name-input")
  5 | const cssCodeBtn = document.querySelector(".css-code-btn")
  6 | const generateWrapBox = document.querySelector(".generate-wrap-box")
  7 | const text = document.querySelector(".text")
  8 | const colorPicker = document.querySelector(".color-picker")
  9 | const strokeInp = document.querySelector(".stroke-inp")
 10 | const strokeValidation = document.querySelector(".stroke-validation-elem")
 11 | const codePennel = document.querySelector(".code-pannel")
 12 | const styleInp = document.querySelector("#styleInp")
 13 | const copyToClipboard = document.querySelector(".clipboard-btn")
 14 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
 15 | 
 16 | let pickr = createPickr(".color-picker", "#FFFFFF")
 17 | pickr.on('change', (color) => {
 18 |     let COLOR = color.toHEXA().toString()
 19 |     Stroke.text.color = COLOR
 20 |     colorPicker.style.background = COLOR
 21 |     addStyleToText()
 22 | })
 23 | 
 24 | //? Stroke object
 25 | let Stroke = {
 26 |     elemClass: null,
 27 |     isInit: false,
 28 |     text: {
 29 |         stroke: 3,
 30 |         color: "#FFFFFF"
 31 |     },
 32 |     strokeValidation: true
 33 | }
 34 | 
 35 | const checkElemClassNameInput = (e) => {
 36 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
 37 |     let regexResult = regexCode.test(e.target.value)
 38 | 
 39 |     if (regexResult) {
 40 |         Stroke.isInit = true
 41 |         Stroke.elemClass = e.target.value.split(" ").join("-")
 42 |         e.target.parentElement.previousElementSibling.innerHTML = ""
 43 | 
 44 |         activeAllInputs()
 45 |         uploadDataInInputs()
 46 |         addStyleToText()
 47 |         checkValidateInputs(strokeInp.value)
 48 |     } else {
 49 |         Stroke.isInit = false
 50 |         disableAllInputs()
 51 |         removeDataFromInputs()
 52 |         removeStyleFromText()
 53 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
 54 |     }
 55 | }
 56 | 
 57 | //? active inputs 
 58 | const activeAllInputs = () => {
 59 |     colorPicker.disabled = false
 60 |     strokeInp.disabled = false
 61 | }
 62 | 
 63 | //? disable inputs
 64 | const disableAllInputs = () => {
 65 |     colorPicker.disabled = true
 66 |     strokeInp.disabled = true
 67 | }
 68 | 
 69 | disableAllInputs()
 70 | 
 71 | //? upload data in inputs
 72 | const uploadDataInInputs = () => {
 73 |     colorPicker.style.background = `${Stroke.text.color}`
 74 |     strokeInp.value = `${Stroke.text.stroke}`
 75 | }
 76 | 
 77 | //? remove data from inputs
 78 | const removeDataFromInputs = () => {
 79 |     colorPicker.style.background = "#FFFFFF"
 80 |     strokeInp.value = ""
 81 | }
 82 | 
 83 | //? add style to color box
 84 | const addStyleToText = () => 
 85 |     text.style.webkitTextStroke  = `${Stroke.text.stroke}px ${Stroke.text.color}`
 86 | 
 87 | //? remove style from color box
 88 | const removeStyleFromText = () => 
 89 |     text.style.webkitTextStroke = ""
 90 | 
 91 | let StyleText = undefined
 92 | //? open generate pannel
 93 | const openGeneratePannel = () => {
 94 |     if (Stroke.isInit) {
 95 |         if (Stroke.strokeValidation) {
 96 |             generateWrapBox.classList.add('active')
 97 |             StyleText = `.${Stroke.elemClass} { -webkit-text-stroke: ${Stroke.text.stroke}px ${Stroke.text.color}; }`
 98 |             codePennel.innerHTML = `.${Stroke.elemClass} { <br>
 99 |                 &nbsp;&nbsp; -webkit-text-stroke: ${Stroke.text.stroke}px &nbsp;&nbsp;&nbsp; ${Stroke.text.color}; <br>
100 |             }`
101 |         }
102 |         else 
103 |             alert("please complete the fields correctly")
104 |     } else
105 |         alert("please complete the fields above")
106 | }
107 | 
108 | //? copy to clipboard
109 | const copyToClipboardText = () => {
110 |     styleInp.value = StyleText
111 |     navigator.clipboard.writeText(styleInp.value);
112 | }
113 | 
114 | //? close generator pannel
115 | const closeGeneratePannel = () => {
116 |     generateWrapBox.classList.remove("active")
117 | }
118 | 
119 | //? check validation
120 | const checkValidateInputs = (value) => {
121 |     if (!isNaN(value) && Number(strokeInp.value) <= 5 && Number(strokeInp.value) >= 0) {
122 |         Stroke.strokeValidation = true
123 |         Stroke.text.stroke = Number(value)
124 |         strokeValidation.innerHTML = ""
125 |         addStyleToText()
126 |     } else {
127 |         Stroke.strokeValidation = false
128 |         strokeValidation.innerHTML = "Please select a positive number from 0 to 5"
129 |     }
130 | }
131 | 
132 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
133 | cssCodeBtn.addEventListener("click", openGeneratePannel)
134 | strokeInp.addEventListener("keyup", (e) => checkValidateInputs(e.target.value))
135 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
136 | copyToClipboard.addEventListener("click", copyToClipboardText)


--------------------------------------------------------------------------------
/public/content/js/tools/text-transform-tool.js:
--------------------------------------------------------------------------------
 1 | //? get elements
 2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
 3 | const cssCodeBtn = document.querySelector(".css-code-btn")
 4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
 5 | const text = document.querySelector(".text")
 6 | const transformBox = document.querySelector(".transform-box")
 7 | const transformMenuItems = document.querySelectorAll(".transform-menu-item-box")
 8 | const codePennel = document.querySelector(".code-pannel")
 9 | const styleInp = document.querySelector("#styleInp")
10 | const copyToClipboard = document.querySelector(".clipboard-btn")
11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
12 | 
13 | //? Transform object
14 | let Transform = {
15 |     elemClass: null,
16 |     isInit: false,
17 |     transform: "none"
18 | }
19 | 
20 | const checkElemClassNameInput = (e) => {
21 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
22 |     let regexResult = regexCode.test(e.target.value)
23 | 
24 |     if (regexResult) {
25 |         Transform.isInit = true
26 |         Transform.elemClass = e.target.value.split(" ").join("-")
27 |         e.target.parentElement.previousElementSibling.innerHTML = ""
28 | 
29 |         addStyleToText()
30 |     } else {
31 |         Transform.isInit = false
32 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
33 |     }
34 | }
35 | 
36 | //? add style to color box
37 | const addStyleToText = () => 
38 |     text.style.textTransform = `${Transform.transform}`
39 | 
40 | //? open generate pannel
41 | const openGeneratePannel = () => {
42 |     if (Transform.isInit) {
43 |         generateWrapBox.classList.add("active")
44 |         StyleText = `.${Transform.elemClass} { text-transform: ${Transform.transform}; }`
45 |         codePennel.innerHTML = `.${Transform.elemClass} { <br>
46 |             &nbsp;&nbsp;&nbsp; text-transform: ${Transform.transform}; <br>
47 |         }`
48 |     } else
49 |         alert("please complete the field above")
50 | }
51 | 
52 | //? copy to clipboard
53 | const copyToClipboardText = () => {
54 |     styleInp.value = StyleText
55 |     navigator.clipboard.writeText(styleInp.value);
56 | }
57 | 
58 | //? close generator pannel
59 | const closeGeneratePannel = () => {
60 |     generateWrapBox.classList.remove("active")
61 | }
62 | 
63 | 
64 | //? check init
65 | const checkInit = () => {
66 |     return Transform.isInit ? true : false
67 | }
68 | 
69 | //? active align box
70 | const activeAlignBox = () => 
71 |     transformBox.classList.contains("active") ? transformBox.classList.remove("active") : transformBox.classList.add("active")
72 | 
73 | 
74 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
75 | elemClassNameInp.addEventListener("focus", () => transformBox.classList.remove("active"))
76 | cssCodeBtn.addEventListener("click", openGeneratePannel)
77 | transformBox.addEventListener("click", () => checkInit() ? activeAlignBox() : alert("please complete the fields correctly"))
78 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
79 | copyToClipboard.addEventListener("click", copyToClipboardText)
80 | 
81 | transformMenuItems.forEach(menuItem => {
82 |     menuItem.addEventListener("click", () => {
83 |         transformMenuItems.forEach(allMenuItems => {
84 |             if (allMenuItems.innerText === menuItem.innerText) {
85 |                 allMenuItems.classList.add('active')
86 |                 transformBox.children[0].innerText = allMenuItems.innerText
87 |                 Transform.transform = allMenuItems.innerText.toLowerCase()
88 |                 addStyleToText()
89 |             } else
90 |                 allMenuItems.classList.remove("active")
91 |         })
92 |     })
93 | })


--------------------------------------------------------------------------------
/public/content/js/tools/white-space-tool.js:
--------------------------------------------------------------------------------
 1 | //? get elements
 2 | const elemClassNameInp = document.querySelector(".element-class-name-input")
 3 | const cssCodeBtn = document.querySelector(".css-code-btn")
 4 | const generateWrapBox = document.querySelector(".generate-wrap-box")
 5 | const text = document.querySelector(".text")
 6 | const whiteSpaceBox = document.querySelector(".white-space-box")
 7 | const whiteSpaceMenuItems = document.querySelectorAll(".white-space-menu-item-box")
 8 | const codePennel = document.querySelector(".code-pannel")
 9 | const styleInp = document.querySelector("#styleInp")
10 | const copyToClipboard = document.querySelector(".clipboard-btn")
11 | const cssCodeCloseBtn = document.querySelector(".close-generate-pannel-btn")
12 | 
13 | //? white space obj
14 | let White_Space = {
15 |     elemClass: null,
16 |     isInit: false,
17 |     white_space: "normal"
18 | }
19 | 
20 | const checkElemClassNameInput = (e) => {
21 |     let regexCode = /^[a-zA-Z" "]{1,30}$/g
22 |     let regexResult = regexCode.test(e.target.value)
23 | 
24 |     if (regexResult) {
25 |         White_Space.isInit = true
26 |         White_Space.elemClass = e.target.value.split(" ").join("-")
27 |         e.target.parentElement.previousElementSibling.innerHTML = ""
28 | 
29 |         addStyleToText()
30 |     } else {
31 |         White_Space.isInit = false
32 |         e.target.parentElement.previousElementSibling.innerHTML = "Please complete the field below. You are allowed to enter up to 30 letters"
33 |     }
34 | }
35 | 
36 | //? add style to color box
37 | const addStyleToText = () => 
38 |     text.style.whiteSpace = `${White_Space.white_space}`
39 | 
40 | //? open generate pannel
41 | const openGeneratePannel = () => {
42 |     if (White_Space.isInit) {
43 |         generateWrapBox.classList.add('active')
44 |         StyleText = `.${White_Space.elemClass} { white-space: ${White_Space.white_space}; }`
45 |         codePennel.innerHTML = `.${White_Space.elemClass} { <br>
46 |             &nbsp;&nbsp;&nbsp; white-space: ${White_Space.white_space}; <br>
47 |         }`
48 |     } else
49 |         alert("please complete the fields above")
50 | }
51 | 
52 | //? copy to clipboard
53 | const copyToClipboardText = () => {
54 |     styleInp.value = StyleText
55 |     navigator.clipboard.writeText(styleInp.value);
56 | }
57 | 
58 | //? close generator pannel
59 | const closeGeneratePannel = () => {
60 |     generateWrapBox.classList.remove("active")
61 | }
62 | 
63 | //? check init
64 | const checkInit = () => {
65 |     return White_Space.isInit ? true : false
66 | }
67 | 
68 | //? active align box
69 | const activeAlignBox = () => 
70 |     whiteSpaceBox.classList.contains("active") ? whiteSpaceBox.classList.remove("active") : whiteSpaceBox.classList.add("active")
71 | 
72 | 
73 | elemClassNameInp.addEventListener("keyup", checkElemClassNameInput)
74 | elemClassNameInp.addEventListener("focus", () => whiteSpaceBox.classList.remove("active"))
75 | cssCodeBtn.addEventListener("click", openGeneratePannel)
76 | whiteSpaceBox.addEventListener("click", () => checkInit() ? activeAlignBox() : alert("please complete the fields correctly"))
77 | cssCodeCloseBtn.addEventListener("click", closeGeneratePannel)
78 | copyToClipboard.addEventListener("click", copyToClipboardText)
79 | 
80 | whiteSpaceMenuItems.forEach(menuItem => {
81 |     menuItem.addEventListener("click", () => {
82 |         whiteSpaceMenuItems.forEach(allMenuItems => {
83 |             if (allMenuItems.innerText === menuItem.innerText) {
84 |                 allMenuItems.classList.add('active')
85 |                 whiteSpaceBox.children[0].innerText = allMenuItems.innerText
86 |                 White_Space.white_space = allMenuItems.innerText.toLowerCase()
87 |                 addStyleToText()
88 |             } else
89 |                 allMenuItems.classList.remove("active")
90 |         })
91 |     })
92 | })


--------------------------------------------------------------------------------
/public/content/js/validate-inputs-comming-soon.js:
--------------------------------------------------------------------------------
 1 | const userNameInp = document.querySelector(".user-name-inp")
 2 | const emailInp = document.querySelector(".email-inp")
 3 | const form = document.forms[0]
 4 | const userNameValidate = document.getElementById("user-name-validate")
 5 | const emailValidate = document.getElementById("email-validate")
 6 | const submitBtn = document.querySelector(".send-btn")
 7 | 
 8 | //* validate user name value 
 9 | const checkUserNameValue = (value) => {
10 |     const userNameRegexPat =  /^[a-zA-Z0-9]+$/
11 |     const emailRegexPat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
12 |     const regexChecked = userNameRegexPat.test(value)
13 |     
14 |     if (regexChecked) {
15 |         if (emailInp.value.match(emailRegexPat))
16 |             checkInputs(true, true)
17 |         else
18 |             checkInputs(true, false)
19 |     } else {
20 |         if (emailInp.value.match(emailRegexPat))
21 |             checkInputs(false, true)
22 |         else
23 |             checkInputs(false, false)
24 |     }
25 | }
26 | 
27 | //* validate email
28 | const checkEmail = (value) => {
29 |     const emailRegexPat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
30 |     const userNameRegexPat = /^[a-zA-Z0-9]+$/
31 |     const regexChecked = emailRegexPat.test(value)
32 | 
33 |     if (regexChecked) {
34 |         if (userNameInp.value.match(userNameRegexPat))
35 |             checkInputs(true, true)
36 |         else
37 |             checkInputs(false, true)
38 |     } else {
39 |         if (userNameInp.value.match(userNameRegexPat))
40 |             checkInputs(true, false)
41 |         else
42 |             checkInputs(false, false)
43 |     }
44 | }
45 | 
46 | //* check all of inputs
47 | const checkInputs = (username, email) => {
48 |     if (username && email) {
49 |         submitBtn.disabled = false
50 |     } else {
51 |         submitBtn.disabled = true
52 |     }
53 |     
54 |     if (username) {
55 |         userNameValidate.innerHTML = ""
56 |     } else {
57 |         userNameValidate.innerHTML = "Please don't use inappropriate spaces and characters"
58 |     }
59 | 
60 |     if (email) {
61 |         emailValidate.innerHTML = ""
62 |     } else {
63 |         emailValidate.innerHTML = "Please enter the email correctly"
64 |     }
65 | }
66 | 
67 | userNameInp.addEventListener("keyup", (e) => checkUserNameValue(e.target.value))
68 | emailInp.addEventListener("keyup", (e) => checkEmail(e.target.value))


--------------------------------------------------------------------------------