diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 2005275..51605f2 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -1,7 +1,7 @@ import React, { useState } from 'react' /** - * + * * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input * @param { [] } refList - react ref objects list for handler validation * @param { } action - fetch method @@ -16,7 +16,7 @@ export const FormGenerator = ({ if ( inputList[0].action === 'Async' ) { await action(refList) - } else if ( + } else if ( inputList[0].action === 'Download' || inputList[0].action === 'Upload' ) { @@ -55,7 +55,7 @@ export const FormGenerator = ({ ) } else if (input.type === 'password') { return ( - - : } - + ) } @@ -121,11 +121,11 @@ export const FormGenerator = ({ /** * Text input generator, example: * @param { - * { - * type: 'text', - * name: 'name', - * ref: React.createRef() - * } } input - basic text input + * { + * type: 'text', + * name: 'name', + * ref: React.createRef() + * } } input - basic text input * @param { * { * type: 'info', @@ -137,10 +137,10 @@ const TextInputGenerator = ({ input, info }) => { return ( -
-
- {input.name + ':'} -
+
+ { return ( -
-
- {input.name + ':'} -
+
+ { typeof object == "object" ? - + Object.keys( object ).map( ( key ) => { return ( @@ -211,12 +211,12 @@ const ObjectIterator = ({ /** * Text input generator, example: * @param { - * { - * type: 'drop-box', + * { + * type: 'drop-box', * name: 'name', * values: list, * link: link to the file - * } } input - basic text input + * } } input - basic text input * @param { * { * type: 'info', @@ -233,17 +233,17 @@ const DownloadFilesListInputGenerator = ({ id={input.name + info.action + info.endpoint + 'DropBox'} > {input.name + ':'} - { - input.values.length == 0 ? - + { + input.values.length == 0 ? + () => { return (
empty
) - } - + } + : input.values.map( (item, index) => { return ( @@ -255,17 +255,17 @@ const DownloadFilesListInputGenerator = ({ { typeof item == 'string' ? - item + item : Object.keys(item).map( ( key, index ) => { return( -
+
{ key + ': ' } { typeof item[key] === "object" ? - + Object.keys( item[key] ).map( ( key_two, index ) => { return ( @@ -273,12 +273,12 @@ const DownloadFilesListInputGenerator = ({ { key_two + ': '} { typeof item[key][key_two] == 'object' ? - + Object.keys( item[key][key_two] ).map( (key_three, index) => { return (
- { key_three + ": " } + { key_three + ": " } { "x: " + item[key][key_two][key_three].x + ", " } { "y: " + item[key][key_two][key_three].y + ", " } { "z: " + item[key][key_two][key_three].z + ", " } @@ -286,9 +286,9 @@ const DownloadFilesListInputGenerator = ({ ) } ) - + : - + item[key][key_two] } @@ -296,20 +296,20 @@ const DownloadFilesListInputGenerator = ({ ) } ) - + : - - item[key] + + item[key] }
- + ) } ) }

- download @@ -330,12 +330,12 @@ const DownloadFilesListInputGenerator = ({ /** * Text input generator, example: * @param { - * { - * type: 'chice-listing', + * { + * type: 'chice-listing', * name: 'name', * values: list, * ref: React.createRef() - * } } input - basic text input + * } } input - basic text input * @param { * { * type: 'info', @@ -388,14 +388,14 @@ const ChoiceListingGenerator = ({ /** * Upload file input generator, example: * @param { - * { - * type: 'file', - * name: 'name', - * endpoint: 'Album', - * fileType: 'image' or 'audio', - * dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState + * { + * type: 'file', + * name: 'name', + * endpoint: 'Album', + * fileType: 'image' or 'audio', + * dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState * file: file, setFile: setFile() #useState - * } } input - + * } } input - */ const UploadInputGenerator = ({ input, info @@ -456,15 +456,15 @@ const UploadInputGenerator = ({ /** * Text input generator, example: * @param { - * { - * type: 'range', + * { + * type: 'range', * name: 'name', * min: min range value, * max: max range value, * step: step of value, - * unit: unit of range value, - * ref: React.createRef() - * } } input - basic text input + * unit: unit of range value, + * ref: React.createRef() + * } } input - basic text input * @param { * { * type: 'info', @@ -501,7 +501,7 @@ const RangeInputGenerator = ({ ) } -const RangeGenerator = ({ +const RangeGenerator = ({ key, label, labelStyle, @@ -547,16 +547,16 @@ const RangeGenerator = ({ /** * Text input generator, example: * @param { - * { - * type: 'vector', - * name: 'name', - * refDict: + * { + * type: 'vector', + * name: 'name', + * refDict: * { * x: React.createRef(), * y: React.createRef(), * z: React.createRef() - * } - * } } input - basic text input + * } + * } } input - basic text input * @param { * { * type: 'info', @@ -580,7 +580,7 @@ const VectorInputGenerator = ({ let name = input.name + key + info.action + info.endpoint + 'Input' return (
- { const usernameInput = React.createRef() const passwordInput = React.createRef() - const dispatch = useDispatch() - const { info } = useSelector( userAuthSelector ) + // const dispatch = useDispatch() + // const { info } = useSelector( userAuthSelector ) + const info = "" let refList = [ usernameInput, @@ -25,17 +26,17 @@ const UserLoginForm = () => { { type: 'info', action: 'Create', - endpint: 'user/auth/login', - button_value: 'Sign In' + endpint: 'user/auth', + button_value: 'CONTINUE' }, { type: 'text', - name: 'Username', + name: 'EMAIL', ref: usernameInput }, { type: 'password', - name: 'Password', + name: 'PASSWORD', ref: passwordInput } ] @@ -45,16 +46,16 @@ const UserLoginForm = () => { username: refs[0].current.value, password: refs[1].current.value } - dispatch( - userAuthAsyncThunk.fetchLogin( - pass - ) - ) + // dispatch( + // userAuthAsyncThunk.fetchLogin( + // pass + // ) + // ) } return (
- { } -export default UserLoginForm \ No newline at end of file +export default UserLoginForm diff --git a/src/components/graphic-container.js b/src/components/graphic-container.js new file mode 100644 index 0000000..7468ece --- /dev/null +++ b/src/components/graphic-container.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import '../styles/LoginPage.cube.scss'; + + +const GraphicContainerComponent = () => { + return ( +
+
+
+
+
+
+
+
+
+
+ ) +} + + +export default GraphicContainerComponent diff --git a/src/pages/index.js b/src/pages/index.js index 5ce6358..0f70e40 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,64 +1,11 @@ import React from 'react'; -import '../styles/general.000.scss'; -import '../styles/LoginPage.cube.scss'; - -// import { Provider } from 'react-redux'; -// import { store } from '../redux/store'; - -// import Root from './func_group/root'; - -// if you have problem with watchers - use it: -// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p - -// const IndexPage = () => { -// if (typeof window !== `undefined` && store !== 0) -// return ( -// -// -// -// ) -// else -// return ( -// <> -// -// ) -// } +import LoginPage from './user/login.js'; +import LandingPage from './landing.js'; const IndexPage = () => { return ( -
-
-

X-GPU

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
- -
-
-
+ ) } diff --git a/src/pages/landing.js b/src/pages/landing.js new file mode 100644 index 0000000..633279f --- /dev/null +++ b/src/pages/landing.js @@ -0,0 +1,40 @@ +import React from 'react'; + +import '../styles/general.scss'; + +import GraphicContainerComponent from '../components/graphic-container.js'; + +const LandingPage = () => { + return ( +
+
+

Affordable. Efficient. Accessible.

+

GUARANTED.

+

+ Minimize your expenses without compromising on quality. +
+ Our platform is built for individuals + + who need top-tier rendering without the top-tier investment. + +

+ +

+ + GPU Is Important... + +
+ ...but +

+
+
+ +
+
+ ) +} + + +export default LandingPage diff --git a/src/pages/user/login.js b/src/pages/user/login.js new file mode 100644 index 0000000..91626fb --- /dev/null +++ b/src/pages/user/login.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import '../../styles/general.scss'; +import '../../styles/LoginPage.cube.scss'; + +import GraphicContainerComponent from '../../components/graphic-container.js'; +import UserLoginForm from '../../components/forms/user_auth/userLogin.js'; + + +const LoginPage = () => { + return ( +
+
+

XGPU

+
+
+ + +
+
+ ) +} + + +export default LoginPage diff --git a/src/styles/general.scss b/src/styles/general.scss index 3548883..57150fd 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -1,70 +1,108 @@ +$first-color: rgba(0, 90, 25, 1); +$secondary-color: white; +$third-color: #242b2f; -body { +$title-color: white; +$subtitle-color: #a6a6a6; +$marked-subtitle-color: $first-color; + +$background-color: #242b2f; +$background-base-start: $first-color; +$background-base-end: rgb(51,54,51, 1); +$header-background: 0; +$form-background: rgba(0,0,0,0.5); +$header-color: $form-background; +$button-background: $first-color; +$border-color: $first-color; +$input-background: #222; +$font-family-default: neue-haas-unica, sans-serif; + + +body, html { margin: 0 auto; + height: 100%; overflow: hidden; - background: - linear-gradient( - 10deg, - black 0%, - #0a670a 40%, - #097309 50%, - #0a670a 60%, - black 100% - ); + font-family: $font-family-default; + tab-size: 4; + background: $background-color; + // linear-gradient( + // 10deg, + // black 0%, + // #0a670a 40%, + // #097309 50%, + // #0a670a 60%, + // black 100% + // ); width: 100%; height: 100%; - input { - width: 200px; - height: 30px; - margin-left: 20px; - margin-top:10px; - margin-bottom: 5px; - // border: 0px; - // border-radius: 10px; - font-size: 12pt; - text-align: center; - color: rgba(111,108,106,1); - background-color: rgba(0,0,0,0); - border-bottom: 2px solid; - border-right: 0px; - border-top: 0px; - border-left: 0px; - border-color: green; + .header { + text-align: center; + padding: 20px; + background: $header-background; + color: $header-color; + z-index: 3; // Ensure the login form is above the cube + position: relative; // Required for z-index to take effect - transition-duration: 0.5s; + h1 { + font-size: 72px; + } + } + + .landing { + text-align: center; + padding: 20px; + background: $header-background; + color: $title-color; + z-index: 3; // Ensure the login form is above the cube + position: relative; // Required for z-index to take effect + + h1 { + font-size: 60px; + font-weight: 800; + color: $title-color; } - input:hover { - border-color: rgba(111,108,106,1); + h2 { + font-size: 60px; + font-weight: 700; + color: $title-color; } - input:active { - background-color: rgba(0,128,0,1); + p { + font-size: 20px; + font-weight: 400; + color: $subtitle-color; } - .input_generate { - + span { + font-size: 20px; + font-weight: 400; + padding-left: 5px; } + .span-white { + color: $title-color; + } + + .span-first-color { + color: $first-color; + } + + button { - height: 30px; - margin-left: 20px; - margin-top:10px; - margin-bottom: 5px; - // border: 0px; - border-radius: 10px; - font-size: 12pt; - text-align: center; - color: green; - background-color: rgba(0,0,0,0); - border: 2px solid; - border-color: green; - - padding-left: 20px; - padding-right: 20px; - padding-bottom: 30px; - padding-top: 12px; + margin-top: 35px; + margin-bottom: 35px; + padding-top: 20px; + padding: 25px; + border-radius: 5px; + background: $button-background; + font-size: 20px; + font-family: $font-family-default; + font-weight: 800; + color: rgba(0,0,0,0.5); + border: none; + cursor: pointer; transition-duration: 0.1s; } @@ -72,6 +110,77 @@ body { background-color: green; color: black } + } + + .main-content { + //flex: 1; + //display: flex; + margin-top: 0%; + align-items: center; + justify-content: space-evenly; + + .form { + background: $form-background; + padding: 50px; + width: 350px; + color: $subtitle-color; + // border: 2px solid $border-color; + border-radius: 10px; + + margin-top: -400px; + margin-right: auto; + margin-left: auto; + + z-index: 2; // Ensure the login form is above the cube + position: relative; // Required for z-index to take effect + + .form-field { + margin-bottom: 15px; + + label { + display: block; + margin-bottom: 15px; + } + + input { + width: 90%; + padding: 5%; + background: $input-background; + border: 1px solid $border-color; + border-radius: 5px; + color: white; + transition-duration: 0.5s; + } + + input:hover { + border-color: rgba(111,108,106,1); + } + + input:active { + background-color: rgba(0,128,0,1); + } + } + + button { + padding: 5%; + width: 100%; + margin-top: 30px; + border-radius: 5px; + background: $button-background; + font-family: $font-family-default; + font-weight: 800; + color: rgba(0,0,0,0.5); + border: none; + cursor: pointer; + transition-duration: 0.1s; + } + + button:hover { + background-color: green; + color: black + } + } + } } .navigation_bar { @@ -122,7 +231,7 @@ body { width: 100%; display: flex; } -} + } } .float_form_auth { @@ -137,7 +246,6 @@ body { input { width: 75%; float: right; - } .input_generate { @@ -255,7 +363,7 @@ body { } button { - width: 100%; + width: 100%; margin-top: 25px; margin-left: auto; margin-right: auto; @@ -317,4 +425,4 @@ body { button { margin-left: 0px; } -} \ No newline at end of file +} diff --git a/src/styles/landing.scss b/src/styles/landing.scss new file mode 100644 index 0000000..e69de29