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
parent
91da004a7e
commit
b91896e6a5
|
|
@ -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 (
|
||||
<PasswordInputGenerator
|
||||
<PasswordInputGenerator
|
||||
input={input}
|
||||
info={info}
|
||||
key={key}
|
||||
|
|
@ -63,7 +63,7 @@ export const FormGenerator = ({
|
|||
)
|
||||
} else if (input.type === 'links-listing') {
|
||||
return (
|
||||
<DownloadFilesListInputGenerator
|
||||
<DownloadFilesListInputGenerator
|
||||
input={input}
|
||||
info={info}
|
||||
key={key}
|
||||
|
|
@ -79,7 +79,7 @@ export const FormGenerator = ({
|
|||
)
|
||||
} else if (input.type === 'choice-listing') {
|
||||
return (
|
||||
<ChoiceListingGenerator
|
||||
<ChoiceListingGenerator
|
||||
input={input}
|
||||
info={info}
|
||||
key={key}
|
||||
|
|
@ -87,7 +87,7 @@ export const FormGenerator = ({
|
|||
)
|
||||
} else if (input.type === 'range') {
|
||||
return (
|
||||
<RangeInputGenerator
|
||||
<RangeInputGenerator
|
||||
input={input}
|
||||
info={info}
|
||||
key={key}
|
||||
|
|
@ -107,13 +107,13 @@ export const FormGenerator = ({
|
|||
{
|
||||
info.button_value === ''
|
||||
? <></>
|
||||
: <button
|
||||
: <button
|
||||
type='submit'
|
||||
>
|
||||
{ info.button_value }
|
||||
</button>
|
||||
}
|
||||
|
||||
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<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'
|
||||
|
|
@ -153,11 +153,11 @@ const TextInputGenerator = ({
|
|||
/**
|
||||
* Text input generator, example:
|
||||
* @param {
|
||||
* {
|
||||
* type: 'password',
|
||||
* name: 'name',
|
||||
* ref: React.createRef()
|
||||
* } } input - basic text input
|
||||
* {
|
||||
* type: 'password',
|
||||
* name: 'name',
|
||||
* ref: React.createRef()
|
||||
* } } input - basic text input
|
||||
* @param {
|
||||
* {
|
||||
* type: 'info',
|
||||
|
|
@ -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'
|
||||
|
|
@ -190,7 +190,7 @@ const ObjectIterator = ({
|
|||
<>
|
||||
{
|
||||
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 (
|
||||
<div>
|
||||
empty
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
: input.values.map( (item, index) => {
|
||||
|
||||
return (
|
||||
|
|
@ -255,17 +255,17 @@ const DownloadFilesListInputGenerator = ({
|
|||
{
|
||||
typeof item == 'string' ?
|
||||
|
||||
item
|
||||
item
|
||||
|
||||
: Object.keys(item).map(
|
||||
( key, index ) => {
|
||||
|
||||
return(
|
||||
<div style={{ paddingLeft: '10px' }}>
|
||||
<div style={{ paddingLeft: '10px' }}>
|
||||
{ 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 (
|
||||
<div style={{ paddingLeft: '30px' }}>
|
||||
{ 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]
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
<br />
|
||||
<br />
|
||||
<a
|
||||
<a
|
||||
href={ input.link + index + '/' }
|
||||
>
|
||||
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 (
|
||||
<div style={ { display: 'flex', width: '140px' } }>
|
||||
<RangeGenerator
|
||||
<RangeGenerator
|
||||
key={key}
|
||||
label={key}
|
||||
labelStyle={ { width: '5px', marginTop: '15px' } }
|
||||
|
|
@ -605,4 +605,4 @@ const VectorInputGenerator = ({
|
|||
}
|
||||
|
||||
|
||||
export default FormGenerator
|
||||
export default FormGenerator
|
||||
|
|
|
|||
|
|
@ -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,16 +46,16 @@ const UserLoginForm = () => {
|
|||
username: refs[0].current.value,
|
||||
password: refs[1].current.value
|
||||
}
|
||||
dispatch(
|
||||
userAuthAsyncThunk.fetchLogin(
|
||||
pass
|
||||
)
|
||||
)
|
||||
// dispatch(
|
||||
// userAuthAsyncThunk.fetchLogin(
|
||||
// pass
|
||||
// )
|
||||
// )
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormGenerator
|
||||
<FormGenerator
|
||||
inputList={ inputList }
|
||||
refList={ refList }
|
||||
action={ login }
|
||||
|
|
@ -67,4 +68,4 @@ const UserLoginForm = () => {
|
|||
|
||||
}
|
||||
|
||||
export default UserLoginForm
|
||||
export default UserLoginForm
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 />
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue