Binary files /dev/null and b/public/pages/upscale/woman-result.jpg differ Binary files /dev/null and b/public/pages/upscale/woman.jpg differ @@ -334,24 +334,24 @@ textarea { } .rdw-editor-toolbar { - background-color: transparent !important; - padding: 20px 0 !important; - border: none !important; - border-bottom: 1px solid var(--copy-border) !important; - border-top: 1px solid var(--copy-border) !important; + background-color: transparent !important; + padding: 20px 0 !important; + border: none !important; + border-bottom: 1px solid var(--copy-border) !important; + border-top: 1px solid var(--copy-border) !important; } .rdw-dropdown-wrapper { - background-color: transparent !important; - border: 2px solid var(--new-ui-bg-app-color) !important; - border-radius: 10px !important; - padding: 0 !important; - height: 36px !important; - min-width: 40px !important; + background-color: transparent !important; + border: 2px solid var(--new-ui-bg-app-color) !important; + border-radius: 10px !important; + padding: 0 !important; + height: 36px !important; + min-width: 40px !important; } -.rdw-dropdown-selectedtext{ - padding: 0 16px 0 12px !important; +.rdw-dropdown-selectedtext { + padding: 0 16px 0 12px !important; } .rdw-dropdown-wrapper:hover { @@ -368,61 +368,61 @@ textarea { } .rdw-dropdown-optionwrapper { - border: none !important; - border-radius: 10px !important; - width: 100% !important; - margin-top: 12px !important; - overflow: hidden; - color: inherit !important; - background-color: var(--background-color-main) !important; - overflow-y: hidden !important; + border: none !important; + border-radius: 10px !important; + width: 100% !important; + margin-top: 12px !important; + overflow: hidden; + color: inherit !important; + background-color: var(--background-color-main) !important; + overflow-y: hidden !important; } .rdw-block-dropdown { width: 150px !important; } .rdw-dropdown-optionwrapper > li { - color: var(--new-ui-text-color) !important; - padding: 0 16px 0 12px !important; + color: var(--new-ui-text-color) !important; + padding: 0 16px 0 12px !important; } -.rdw-dropdown-optionwrapper > li:hover{ - background-color:var(--new-ui-gray-color) !important +.rdw-dropdown-optionwrapper > li:hover { + background-color: var(--new-ui-gray-color) !important; } -.rdw-dropdownoption-active{ - background: var(--new-ui-gray-color) !important +.rdw-dropdownoption-active { + background: var(--new-ui-gray-color) !important; } .rdw-dropdown-optionwrapper:hover { - border: none !important; - box-shadow: none !important; - color: inherit !important; + border: none !important; + box-shadow: none !important; + color: inherit !important; } -.rdw-dropdown-carettoclose{ - border-radius: 5px !important; - border-bottom-color: var(--new-ui-gray-color) !important; +.rdw-dropdown-carettoclose { + border-radius: 5px !important; + border-bottom-color: var(--new-ui-gray-color) !important; } -.rdw-dropdown-carettoopen{ - border-radius: 5px !important; - border-top-color: var(--new-ui-gray-color) !important; +.rdw-dropdown-carettoopen { + border-radius: 5px !important; + border-top-color: var(--new-ui-gray-color) !important; } -.rdw-text-align-wrapper{ - margin: 0 !important; +.rdw-text-align-wrapper { + margin: 0 !important; } -.rdw-list-wrapper{ - margin: 0 !important; +.rdw-list-wrapper { + margin: 0 !important; } -.rdw-history-wrapper{ - margin: 0 !important; +.rdw-history-wrapper { + margin: 0 !important; } -.rdw-block-wrapper{ - margin: 0 !important; +.rdw-block-wrapper { + margin: 0 !important; } .border-bottom-1px-gray { @@ -449,9 +449,9 @@ textarea { } .smallScroll::-webkit-scrollbar-track { - background: initial; - /*margin: 21px 0;*/ - margin: 5px 0; + background: initial; + /*margin: 21px 0;*/ + margin: 5px 0; } .smallScroll::-webkit-scrollbar-thumb { @@ -604,3 +604,129 @@ textarea { opacity: 0; transition: all 500ms; } + +/*COPY*/ +.toolbarClassName { + align-items: center; + gap: 15px; +} +.wrapperClassName { +} + +.editorClassName { + border: 1px solid transparent; + transition: border-color 0.3s; + cursor: text; +} + +.editorClassName div:focus { + outline: none !important; + border-color: transparent !important; +} + +.editorClassName div .public-DraftStyleDefault-block { + display: inline-block; + padding: 0 1px; + margin: 0.5em 0 !important; +} + +.public-DraftEditor-content { + overflow-y: scroll; + max-height: calc(75vh - 200px); + + @media (max-width: 768px) { + max-height: calc(70vh - 200px); + } +} + +.public-DraftEditor-content::-webkit-scrollbar { + height: 5px; + width: 2px; +} + +.public-DraftEditor-content::-webkit-scrollbar-track { + background: initial; + margin: 21px 0; +} + +.public-DraftEditor-content::-webkit-scrollbar-thumb { + background-color: rgba(217, 217, 217, 0.49); + border-radius: 5px; +} + +.inline { + gap: 3px; + margin: 0 !important; +} + +.inline-btn { + width: 12px; + height: 25px !important; + margin: 0 !important; + padding: 0 !important; +} + +.rdw-option-active { + background: rgba(229, 229, 229, 0.18) !important; + -webkit-box-shadow: inset 0 0 5px #c1c1c1 !important; + -moz-box-shadow: inset 0 0 5px #c1c1c1 !important; + box-shadow: inset 0 0 5px #c1c1c1 !important; + outline: none !important; +} + +.copy-color { + color: var(--copy-color); + border-color: var(--copy-border); +} + +.title-h1 { + font-weight: 600; + font-size: 34px; + color: var(--new-ui-text-color); + @media (max-width: 768px) { + font-size: 28px; + } +} + +.title-h2 { + font-weight: 600; + font-size: 28px; + color: var(--new-ui-text-color); + @media (max-width: 768px) { + font-size: 24px; + } +} + +.item-enter { + opacity: 0; + transform: translateY(-20px); +} +.item-enter-active { + opacity: 1; + transform: translateY(0); + transition: all 500ms; +} +.item-exit { + opacity: 1; + transform: translateY(0); +} +.item-exit-active { + opacity: 0; + transform: translateY(-20px); + transition: all 500ms; +} + +.opacity-enter { + opacity: 0; +} +.opacity-enter-active { + opacity: 1; + transition: all 500ms; +} +.opacity-exit { + opacity: 1; +} +.opacity-exit-active { + opacity: 0; + transition: all 500ms; +} @@ -0,0 +1 @@ + \ No newline at end of file @@ -0,0 +1,4 @@ + + + \ No newline at end of file @@ -0,0 +1,4 @@ + + + \ No newline at end of file @@ -0,0 +1,6 @@ + + + + \ No newline at end of file @@ -1,4 +1,5 @@ - - - + + \ No newline at end of file @@ -1,5 +1,5 @@ - + \ No newline at end of file @@ -0,0 +1,5 @@ + + + \ No newline at end of file @@ -0,0 +1,43 @@ +.area { + padding: 40px; + min-width: 660px; + display: flex; + align-items: center; + justify-content: center; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A4AAB50D' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); + border-radius: 20px; + background-color: var(--new-ui-element-bg); + + &__input { + display: none; + } + &__icon { + margin-bottom: 18px; + } + + &__title { + margin-bottom: 5px; + color: var(--new-ui-gray-color); + } + + &__content { + margin-bottom: 25px; + text-align: center; + } + + &__text { + color: var(--new-ui-gray-color); + } + + &__button { + display: flex; + align-items: center; + gap: 12px; + } +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} @@ -0,0 +1,55 @@ +import React, { useRef } from 'react' +import styles from './image-area.module.scss' + +import PlusSvg from '#/assets/svg/plus.svg?react' +import { c } from '#/shared' +import { CommonButton } from '#/shared/ui/button' + +interface ImageAreaProps { + files: File[] + setFiles: React.Dispatch> +} + +export const ImageArea = ({ files, setFiles }: ImageAreaProps) => { + const fileInput = useRef(null) + + function onDrop(e: React.DragEvent) { + e.preventDefault() + setFiles(Array.from(e.dataTransfer.files)) + } + + function onInputChange(e: React.ChangeEvent) { + e.preventDefault() + + const { target } = e + + if (!target.files) return + + const file = target.files.item(0)! + + if (['png', 'jpg', 'jpeg'].some((ext) => file.name.includes(ext))) { + setFiles([file]) + } + } + + return ( +
e.preventDefault()} className={styles.area}> +
+ +
+

Загрузить фото

+

или просто перетащите мышью

+
+ + fileInput.current?.click()} + className={styles.area__button} + variant='primary' + > + + Загрузить + +
+
+ ) +} @@ -0,0 +1 @@ +export * from './image-area' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './upscale-settings.popup' \ No newline at end of file @@ -0,0 +1,4 @@ +.popup{ + min-width: 200px; + min-height: 250px; +} \ No newline at end of file @@ -0,0 +1,15 @@ +import { getPopupById, POPUP_UPSCALE_SETTINGS, PopupTemplate } from '#/shared/ui/popup' +import React, { useEffect } from 'react' +import styles from './upscale-settings.popup.module.scss' + +export const UpscaleSettingsPopup = () => { + const popup = getPopupById(POPUP_UPSCALE_SETTINGS) + + return ( + +
+

НАСТРОЙКИ

+
+ + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1,6 @@ +import { UpscalePage } from '#/views/upscale' +import { getDefaultLayout } from '#/widgets/layouts' + +UpscalePage.getLayout = getDefaultLayout({ titlePage: 'Upscale' }) + +export default UpscalePage @@ -1,2 +1,3 @@ +export const POPUP_UPSCALE_SETTINGS = 'popup-upscale-settings' export const POPUP_IMAGE_SETTINGS = 'popup-image-settings' export const POPUP_IMAGE_MODEL = 'popup-image-model' @@ -8,7 +8,7 @@ min-width: 100px; min-height: 70px; transition: all 0.3s ease-in-out; - z-index: 10; + z-index: 1000; &_mobtransform { width: 100vw; @@ -0,0 +1 @@ +export * from './upscale-page' \ No newline at end of file @@ -0,0 +1,129 @@ +.main { + margin-right: 60px; + position: relative; + height: 100%; +} + +.lottie { + &__wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + } +} + +.loading { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + object-fit: contain; + + > canvas{ + object-fit: contain; + width: 40% !important; + height: 40% !important; + } +} + +.controls { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + z-index: 100; + align-items: center; + gap: 10px; + + &__settings { + height: 50px; + width: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 13px; + border: 1px solid var(--new-ui-gray-color); + } +} + +.general { + display: flex; + align-items: center; + justify-content: center; + padding-top: 60px; + + &__accent { + color: var(--air-color); + } + + &__text { + display: flex; + flex-wrap: wrap; + gap: 0.7ch; + align-items: center; + justify-content: center; + text-align: center; + color: white; + + font-size: 18px; + font-weight: 600; + margin-bottom: 20px; + } + + &__desc { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + z-index: 1; + align-items: center; + flex-direction: column; + } + + &__settings { + display: flex; + gap: 4px; + align-items: center; + color: var(--air-color); + } + + &__imgbox { + width: 900px; + position: relative; + border-radius: 20px; + overflow: hidden; + + &::after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background-color: rgba(52, 52, 52, 0.2); + + [data-theme='dark'] & { + background-color: rgba(0, 0, 0, 0.2); + } + } + } + + &__img { + width: 100%; + height: auto; + } +} @@ -0,0 +1,110 @@ +import { NextPageWithLayout } from '#/pages/_app' +import React, { useEffect, useRef, useState } from 'react' + +import styles from './upscale-page.module.scss' +import { DotLottieReact } from '@lottiefiles/dotlottie-react' + +import { c, Loader } from '#/shared' +import Image from 'next/image' +import { UpscaleEmpty } from '#/widgets/upscale-empty' +import SettingsSvg from '#/assets/svg/settings.svg?react' +import ArrowDropDownSvg from '#/assets/svg/arrow-dropdown.svg?react' +import { CommonButton } from '#/shared/ui/button' +import StarsSvg from '#/assets/svg/stars.svg?react' +import { UpscaleSettingsPopup } from '#/features/upscale-settings' +import { getPopupById, POPUP_UPSCALE_SETTINGS } from '#/shared/ui/popup' +import AnimationBgSvg from '#/assets/svg/animation-bg.svg?react' + +interface UpscalePageProps {} + +export const UpscalePage: NextPageWithLayout = ({}: UpscalePageProps) => { + const [images, setImages] = useState([]) + + const [pending, setPending] = useState(false) + + const popup = getPopupById(POPUP_UPSCALE_SETTINGS) + + function onUpscalePhoto() { + const file = images[0] + + setPending(true) + + // ждем бек + } + + useEffect(() => { + console.log(images) + }, [images]) + + return ( +
+ {!images.length && } + + {images.length > 0 && ( +
+
+ initial + {!pending ? ( +
+
+ Выберите нужные +
+ + параметры +
+ улучшения +
+ и нажмите + Улучшить фото +
+ +
+ ) : ( +
+ + +
+ )} +
+ +
+ + {pending ? ( + + ) : ( + + )} + {pending ? 'Улучшение фото...' : 'Улучшить фото'} + + + +
+
+ )} +
+ ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -148,7 +148,7 @@ export const Layout: React.FC = ({ }} > - + {children} @@ -61,6 +61,12 @@ export const menuListMiddle = [ icon: '/svg/side-menu/image', activeList: ['images'], }, + { + title: 'Апскейл', + link: '/upscale', + icon: '/svg/side-menu/image', + activeList: ['upscale'], + }, // { title: 'Копирайтинг', link: '/copywriting/my', icon: '/svg/side-menu/copyrating', activeList: ['copywriting'] }, // { title: 'Видео', link: '/video', icon: '/svg/side-menu/video', activeList: [] }, // { title: 'Аудио', link: '/audio', icon: '/svg/side-menu/audio', activeList: [] }, @@ -313,7 +319,11 @@ export const SideMenu = ({ )} {openErrorModal && ( - + )} {open && ( @@ -418,7 +428,11 @@ export function MenuItem(props: MenuItemProps) { > {typeof props.icon === 'string' ? ( {''}> +} + +export const UpscaleEmpty = ({ images, setImages }: UpscaleEmptyProps) => { + return ( +
+
+ initial + +
+ result +
+
+ +
+
+
+ +
+ +

+ Теперь без мыльных
изображений +

+ + + + +
+ ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -35,7 +35,7 @@ "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^4.5.8", - "@lottiefiles/dotlottie-react": "^0.12.0", + "@lottiefiles/dotlottie-react": "^0.13.2", "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.12", "@mui/styled-engine-sc": "^5.11.11", @@ -74,6 +74,7 @@ "next-auth": "^4.20.1", "next-i18next": "^14.0.0", "prettier": "^2.8.8", + "re-resizable": "^6.11.2", "react": "18.2.0", "react-chartjs-2": "^5.2.0", "react-color": "^2.19.3",