tbs093a
/
render.app.frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(refactor): combine old useful func to new stuff + other 

refactor LoginPage, add LandingPage, add Components for easy re-use, combine scss files / etc.
feat/x_gpu/new_version
TBS093A 2024-04-30 00:49:00 +02:00
parent 91da004a7e
commit b91896e6a5
8 changed files with 341 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/forms/formGenerator.js
View File

@ -137,10 +137,10 @@ const TextInputGenerator = ({
input, info
}) => {
return (
<div className="input_generate">
<div className="input_labels">
{input.name + ':'}
</div>
<div className="form-field">
<label>
{input.name}
</label>
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'
@ -169,10 +169,10 @@ const PasswordInputGenerator = ({
input, info
}) => {
return (
<div className="input_generate">
<div className="input_labels">
{input.name + ':'}
</div>
<div className="form-field">
<label>
{input.name}
</label>
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'

29
src/components/forms/user_auth/userLogin.js
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
// import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
// import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
// import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
import FormGenerator from '../formGenerator'
@ -13,8 +13,9 @@ const UserLoginForm = () => {
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,11 +46,11 @@ const UserLoginForm = () => {
username: refs[0].current.value,
password: refs[1].current.value
}
dispatch(
userAuthAsyncThunk.fetchLogin(
pass
)
)
// dispatch(
// userAuthAsyncThunk.fetchLogin(
// pass
// )
// )
}
return (

22
src/components/graphic-container.js 100644
View File

@ -0,0 +1,22 @@
import React from 'react';
import '../styles/LoginPage.cube.scss';
const GraphicContainerComponent = () => {
return (
<div className="graphic-container">
<div className="cube">
<div className="front"></div>
<div className="back"></div>
<div className="right"></div>
<div className="left"></div>
<div className="top"></div>
<div className="bottom"></div>
</div>
</div>
)
}
export default GraphicContainerComponent

59
src/pages/index.js
View File

@ -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 (
// <Provider store={ store }>
// <Root />
// </Provider>
// )
// else
// return (
// <>
// </>
// )
// }
import LoginPage from './user/login.js';
import LandingPage from './landing.js';
const IndexPage = () => {
return (
<div className="login-container">
<header className="header">
<h1>X-GPU</h1>
</header>
<main className="main-content">
<div className="graphic-container">
<div className="cube">
<div className="front"></div>
<div className="back"></div>
<div className="right"></div>
<div className="left"></div>
<div className="top"></div>
<div className="bottom"></div>
</div>
</div>
<form className="login-form">
<div className="form-field">
<label htmlFor="login">
EMAIL
</label>
<input type="text" id="login" name="login" />
</div>
<div className="form-field">
<label htmlFor="password">
PASSWORD
</label>
<input type="password" id="password" name="password" />
</div>
<button type="submit">CONTINUE</button>
</form>
</main>
</div>
<LandingPage />
)
}

40
src/pages/landing.js 100644
View File

@ -0,0 +1,40 @@
import React from 'react';
import '../styles/general.scss';
import GraphicContainerComponent from '../components/graphic-container.js';
const LandingPage = () => {
return (
<div className="login-container">
<header className="landing">
<h2>Affordable. Efficient. Accessible.</h2>
<h1>GUARANTED.</h1>
<p>
Minimize your expenses without compromising on quality.
<br />
Our platform is built for individuals
<span className="span-white">
who need top-tier rendering without the top-tier investment.
</span>
</p>
<button>
GET A DEMO
</button>
<p>
<span className="span-first-color">
GPU Is Important...
</span>
<br />
...but
</p>
</header>
<main className="main-content">
<GraphicContainerComponent />
</main>
</div>
)
}
export default LandingPage

25
src/pages/user/login.js 100644
View File

@ -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 (
<div className="login-container">
<header className="header">
<h1>XGPU</h1>
</header>
<main className="main-content">
<GraphicContainerComponent />
<UserLoginForm />
</main>
</div>
)
}
export default LoginPage

204
src/styles/general.scss
View File

@ -1,37 +1,154 @@
$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;
.header {
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;
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
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;
}
h2 {
font-size: 60px;
font-weight: 700;
color: $title-color;
}
p {
font-size: 20px;
font-weight: 400;
color: $subtitle-color;
}
span {
font-size: 20px;
font-weight: 400;
padding-left: 5px;
}
.span-white {
color: $title-color;
}
.span-first-color {
color: $first-color;
}
button {
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;
}
button:hover {
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;
}
@ -42,29 +159,19 @@ body {
input:active {
background-color: rgba(0,128,0,1);
}
.input_generate {
}
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;
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;
}
@ -72,6 +179,8 @@ body {
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 {

0
src/styles/landing.scss 100644
View File