diff --git a/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.sass b/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.sass deleted file mode 100644 index 681839d..0000000 --- a/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use '/src/assets/css/variables.sass' as vars -@use '/src/assets/css/viewport.sass' as view -@use 'sass:color' - -.section - display: flex - flex-direction: row - align-items: flex-start - padding: 2rem - border: vars.$componentBorder - border-radius: vars.$componentBorderRadius - color: #ffffff - font-family: 'Inter', sans-serif - gap: 2rem diff --git a/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.tsx b/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.tsx deleted file mode 100644 index 9dc0deb..0000000 --- a/src/components/PageComponents/Password-Generator/Password-Manager/PasswordManagerComponent.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import './PasswordManagerComponent.sass' -import { AiTwotonePlusCircle } from 'solid-icons/ai' - -export default () => { - return ( -
-
1
-
- ) -} diff --git a/src/components/Password-Generator/PasswordGeneratorComponent.sass b/src/components/Password-Generator/PasswordGeneratorComponent.sass deleted file mode 100644 index 63dcc83..0000000 --- a/src/components/Password-Generator/PasswordGeneratorComponent.sass +++ /dev/null @@ -1,218 +0,0 @@ -@use '/src/assets/css/variables.sass' as vars -@use '/src/assets/css/viewport.sass' as view -@use 'sass:color' - -$toggleOffColor: rgba(126, 206, 241, 0.286) -$toggleOnColor: rgba(53, 155, 80, 0.993) - -// $toggleOffColor: color.adjust(vars.$background, $lightness: 10%) -// $toggleOnColor: rgba(53, 155, 80, 0.993) - -.section - display: flex - flex-direction: row - align-items: flex-start - padding: 2rem - border: 1px solid rgba(255, 255, 255, 0.3) - border-radius: 16px - color: #ffffff - font-family: 'Inter', sans-serif - gap: 2rem - - @media screen and (max-width: view.$tablet) - display: flex - flex-direction: column - align-items: center - justify-content: center - padding: 2rem - border: 1px solid rgba(255, 255, 255, 0.3) - border-radius: 16px - color: #ffffff - font-family: 'Inter', sans-serif - -.toggle--group - display: flex - flex-direction: column - justify-content: flex-start - align-items: flex-start - padding: 0 2rem 0 0 - margin: 0 - -.right--side - display: flex - flex-direction: column - -.slider--group - padding: 0 0 0 1rem - flex-grow: 0 - - @media screen and (max-width: view.$tablet) - padding: 0 2rem 0 2rem - justify-content: center - align-items: center - -.display--group - padding: 3rem 1rem 1rem 1rem - -.toggle - color: white - padding: 0.25rem 0 - display: flex - flex-direction: row - gap: 0.5rem - align-items: center - height: auto - - &__text - font-size: 1rem - - &__switch - visibility: hidden - width: 0 - height: 0 - - &:checked + label - background-color: $toggleOnColor - transition: background-color 0.5s ease-in-out - - &:checked + label:after - left: calc(100% - 6px) - transform: translateX(-70%) - -.password-display - display: flex - flex-direction: column - justify-content: flex-start - align-items: flex-start - color: #ffffff - // margin-top: 20px - // border: 1px solid #ffffff - // padding: 1rem - // border-radius: 5px - // width: 30rem - - &__label - font-weight: bold - margin: 1rem 0 -0.5rem 0 - - &__content - border: 1px solid color.adjust(vars.$background, $lightness: 20%) - background-color: color.adjust(vars.$background, $lightness: 5%) - color: color.adjust(vars.$background, $lightness: 80%) - width: 23rem - height: auto - padding: 1rem - border-radius: 5px - text-align: left - word-wrap: break-word - letter-spacing: 1px - font-size: 1rem - font-weight: 500 - font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily - -.button--group - display: flex - flex-direction: row - justify-content: flex-start - gap: 1rem - // margin-top: 20px - // border: 1px solid #ffffff - // padding: 1rem - // border-radius: 5px - width: 30rem - margin: 1rem 0 0 0 - -.slider - display: flex - flex-direction: column - align-items: center - user-select: none - touch-action: none - margin: 1rem 0 0 0 - gap: 0.5rem - width: 41rem - cursor: pointer - - &__label - display: flex - flex-direction: row - gap: 0.5rem - width: 100% - - &__track - background-color: hsl(240 6% 90%) - position: relative - border-radius: 9999px - height: 8px - width: 100% - - &__range - position: absolute - background-color: $toggleOnColor - border-radius: 9999px - height: 100% - - &__thumb - display: block - width: 16px - height: 16px - background-color: $toggleOnColor - border-radius: 9999px - top: -4px - - &:hover - box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%) - - &:focus - outline: none - box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%) - - @media screen and (max-width: view.$tablet) - display: flex - flex-direction: column - align-items: center - justify-content: center - text-align: center - width: 100vw - -.alert - border-radius: 6px - padding: 1rem 1.25rem - background-color: rgba(12, 31, 39, 0.991) - border: 1px solid color.adjust($toggleOffColor, $lightness: 2%) - color: rgba(126, 206, 241, 0.748) - font-size: 1.25rem - -.alert--container - position: fixed - top: 50% - left: 50% - transform: translate(-50%, -50%) - z-index: 1000 - -.checkbox - display: inline-flex - align-items: center - - &__control - height: 20px - width: 20px - border-radius: 6px - background-color: #e5e8ec - cursor: pointer - - &__input:focus-visible + &__control - // outline: 2px solid hsl(200 98% 39%) - outline-offset: 2px - - &__control[data-checked] - border-color: color.adjust($toggleOnColor, $blackness: 20%) - background-color: $toggleOnColor - color: white - - &__label - display: none - margin-left: 6px - color: hsl(240 6% 10%) - font-size: 14px - user-select: none diff --git a/src/components/Password-Generator/PasswordGeneratorComponent.tsx b/src/components/Password-Generator/PasswordGeneratorComponent.tsx deleted file mode 100644 index d8a5190..0000000 --- a/src/components/Password-Generator/PasswordGeneratorComponent.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import './PasswordGeneratorComponent.sass' -import { createSignal, createEffect, Show } from 'solid-js' -import Button from '../Button/Button' -import MiniCard from '../MiniCard/MiniCard' -// import ToggleSwtich from '../ToggleSwitch/ToggleSwitch' -import { Slider } from '@kobalte/core/slider' -import { Switch } from '@kobalte/core/switch' -import { Alert } from '@kobalte/core/alert' -import { Checkbox } from '@kobalte/core/checkbox' -import { FaSolidCheck } from 'solid-icons/fa' - -export default () => { - const [uppercase, setUppercase] = createSignal(true) - const [lowercase, setLowercase] = createSignal(true) - const [numbers, setNumbers] = createSignal(true) - const [symbols, setSymbols] = createSignal(true) - const [emojis, setEmojis] = createSignal(false) - const [length, setLength] = createSignal(8) - const [password, setPassword] = createSignal('') - const [showAlert, setShowAlert] = createSignal(false) - - - const generatePassword = () => { - let characters = '' - if (uppercase()) characters += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' - if (lowercase()) characters += 'abcdefghijklmnopqrstuvwxyz' - if (numbers()) characters += '0123456789' - if (symbols()) characters += '!@#$%^&*()_+-=[]{}|;:,.<>?~' - if (emojis()) characters += '😊🙂😅🤩😜😝🐯🐱🐵🦊🦁🐷🐮🧭🦄🥝🏛️' - - let passwordArray = Array.from({ length: length() }, () => characters[Math.floor(Math.random() * characters.length)]) - setPassword(passwordArray.join('')) - } - - // Effect to update the display when the length changes - createEffect(() => { - generatePassword() - }) - - const handleToggleChange = (target: string) => { - if (target === 'uppercase') setUppercase(!uppercase()) - else if (target === 'lowercase') setLowercase(!lowercase()) - else if (target === 'numbers') setNumbers(!numbers()) - else if (target === 'symbols') setSymbols(!symbols()) - else if (target === 'emojis') setEmojis(!emojis()) - - generatePassword() - } - - const copyToClipboard = async () => { - try { - navigator.clipboard.writeText(password()) - setShowAlert(true) - setTimeout(() => setShowAlert(false), 2000) - } catch (error) { - console.error(error) - } - } - - return ( -
-
-

Options:

- -
- - - - - - - - Subscribe - - Uppercase - {/* - */} -
- -
- - - - - - - - Subscribe - - Lowercase - {/* - */} -
-
- - - - - - - - Subscribe - - Numbers - {/* - */} -
-
- - - - - - - - Subscribe - - Symbols - {/* - */} -
- {/*
- Emojis: - - -
*/} -
- - - - - - - - Subscribe - - Emojis -
-
- -
-
- -
- Length: - -
- - - - - - - -
- -
- - -
- {/*
-
-
- -
- - Copied to clipboard! - -
-
- ) -}