feat(forms & navbar): upgrade forms generator & add navbar

add universal validation for XSS & SQL Injection issues omit. add Navbar Component

.dockerignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+

.gitignore

@@ -1,3 +1,3 @@
 node_modules/
 .cache/
-public
+public/

Dockerfile.nginx

@@ -0,0 +1,11 @@
+FROM nginx:latest
+
+WORKDIR /
+
+RUN rm /usr/share/nginx/html/*
+
+COPY ./public ./usr/share/nginx/html/
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.nodejs

@@ -0,0 +1,9 @@
+FROM node:18.19.1-alpine
+
+WORKDIR /app
+
+COPY . ./
+
+RUN npm install --silent --force
+
+CMD ["npm", "run", "build"]

default.conf

@@ -0,0 +1,13 @@
+server {
+        listen 80;
+        listen [::]:80;
+
+        root /var/www/work_front/html;
+        index index.html index.htm index.nginx-debian.html;
+
+        server_name work_front www.work_front;
+
+        location / {
+                try_files $uri $uri/ =404;
+        }
+}

package.json

@@ -8,17 +8,18 @@
     "gatsby"
   ],
   "scripts": {
-    "develop": "gatsby develop",
-    "start": "gatsby develop",
+    "develop": "gatsby develop --host=0.0.0.0",
+    "start": "gatsby develop --host=0.0.0.0",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "gatsby": "^2.32.3",
-    "gatsby-plugin-sass": "^3.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "gatsby": "^5.13.3",
+    "gatsby-plugin-sass": "^6.13.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-particles-js": "^3.4.1",
     "sass": "^1.32.7"
   }
 }

src/components/foot.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import '../styles/general.scss';
+
+import SmallCubeComponent from './smallCube.js';
+
+
+const FootComponent = () => {
+    return (
+        <footer>
+            <div className="content-container">
+                <div className="content">
+                    <div className="section">
+                        <SmallCubeComponent />
+                    </div>
+                    <div className="section">
+                        <h4>
+                            <a>
+                                BUSINESS
+                            </a>
+                        </h4>
+                        <h4>
+                            <a>
+                                SIGN IN
+                            </a>
+                        </h4>
+                        <h4>
+                            <a>
+                                SIGN UP
+                            </a>
+                        </h4>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                        <h4>
+                            Company
+                        </h4>
+                    </div>
+                    <div className="section">
+                        <a>
+                            About Us
+                        </a>
+                    </div>
+                    <div className="section">
+                        <a>
+                            Contact Us
+                        </a>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                        <h4>
+                            Resources
+                        </h4>
+                    </div>
+                    <div className="section">
+                        <a>
+                            Blog
+                        </a>
+                    </div>
+                    <div className="section">
+                        <a>
+                            Help Center
+                        </a>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                    </div>
+                </div>
+            </div>
+            <div className="bottom">
+                <p>
+                    &copy; {new Date().getFullYear()} FehuDev. All rights reserved.
+                </p>
+            </div>
+        </footer>
+    )
+}
+
+
+export default FootComponent

src/components/forms/abstractWebsocket.js

@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice'
+import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice'
+
+import FormGenerator from './formGenerator'
+
+
+const ProgressBar = () => {
+
+    const {
+        percents,
+        connect
+    } = useSelector( renderWebsocketSelector )
+
+    return (
+        <div className="progress_bar_form">
+            <div>
+                {
+                    typeof percents === 'number'
+                    ? 'Progress: ' + percents + '%'
+                    : percents
+                }
+            </div>
+            <div>
+                {
+                    !isNaN(percents) 
+                    && percents.toString().indexOf('.') != -1
+                    ? <div 
+                          className='progress_bar_progress' 
+                          style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
+                      >
+                      </div>
+                    : percents === 'render success'
+                        ? <div 
+                              className='progress_bar_progress'
+                              style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
+                          >
+                          </div>
+                        : <></>
+                }
+            </div>
+        </div>
+    )
+
+}
+
+
+const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
+
+    const [web_socket, setWebsocket] = useState(null)
+
+    const dispatch = useDispatch()
+
+    const { 
+        web_socket_address,
+        address,
+        room_uuid,
+        messages,
+        connected
+    } = useSelector( renderWebsocketSelector )
+
+
+    const handleConnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( web_socket === null && address === '' && room_uuid === '') {
+            dispatch(
+                connect( 
+                    {
+                        address: addressWS
+                    } 
+                )
+            )
+        }
+
+
+    }
+
+    const handleSendMessage = ( refs ) => {
+        
+        let body = bodyComparer( refs )
+
+        console.log( body )
+        try {
+
+            dispatch(
+                saveMessage(
+                    {
+                        message: { info: 0 } // start
+                    }
+                )
+            )
+            
+            web_socket.send(
+                JSON.stringify(
+                    body
+                )
+            )
+
+        } catch (error) {
+
+            web_socket.close()
+            dispatch(
+                disconnect()
+            )
+            setWebsocket(null)
+            console.log(error)
+        
+        }
+    }
+
+    const handleDisconnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( web_socket !== null && address !== '' && room_uuid !== '' ) {
+            try {
+                web_socket.close()
+                dispatch(
+                    disconnect()
+                )
+            } catch (error) {
+                console.log(error)
+            }
+        } else if ( address !== '' && room_uuid !== '' ) {
+            dispatch(
+                disconnect()
+            )
+        }
+
+        setWebsocket(null)
+
+        console.log('disconnect')
+
+    }
+
+    useEffect( 
+        () => {
+
+            if ( web_socket_address !== '' && web_socket === null ) {
+
+                console.log( 'connect' )
+                
+                setWebsocket(new WebSocket( web_socket_address ))
+            }
+
+            if ( web_socket !== null ) {
+
+                web_socket.onmessage = (event) => {
+                    console.log( event.data )
+                    if ( messages[ messages.length - 1 ] !== JSON.parse( event.data ) ) {
+                        dispatch(
+                            saveMessage(
+                                {
+                                    message: JSON.parse( event.data )
+                                }
+                            )
+                        )
+                    }
+                }
+
+            }
+        
+        }
+    )
+
+    return (
+        <div>
+            <div 
+                className="float_form_render_async"
+                style={ 
+                    connected 
+                    ? addressWS === '/vector/single/set/' || addressWS === '/vector/single/image/'
+                        ? { marginTop: '10%', overflowY: 'scroll' }
+                        : { marginTop: '10%' } 
+                    : { marginTop: '100%' } 
+                }
+            >
+                <FormGenerator 
+                    inputList={ inputList }
+                    refList={ refList }
+                    action={ handleSendMessage }
+                />
+            </div>
+            <div className="float_form_connect">
+                <p>
+                    { addressWS }
+                </p>
+                <ProgressBar />
+                {
+                    connected
+                    ? 
+                    <button onClick={ (event) => handleDisconnect(event) }>
+                            Disconnect
+                        </button>
+                    :
+                    <button onClick={ (event) => handleConnect(event) }>
+                            Connect
+                        </button>
+                }
+            </div>
+            <div 
+                className="float_form_console"
+                style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
+            >
+                <p>
+                    console:
+                </p>
+                <div className="console_data">
+                    {
+                        messages.slice(0).reverse().map( (item) => {
+                                return (
+                                    <div>
+                                        <>
+                                            {
+                                                Object.keys(item).map( (key) => {
+
+                                                        if ( key == 'details' ) {
+                                                            return (
+                                                                <>
+                                                                    {
+                                                                        Object.keys(item[key]).map( (keyTwo) => {
+                                                                                return (
+                                                                                    <div>
+                                                                                        { '    ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
+                                                                                    </div>
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    }
+                                                                </>
+                                                            )
+                                                        } else if ( key === 'image' ) {
+                                                            return (
+                                                                <img 
+                                                                    src={ 'data:image/png;base64, ' + item[key] }
+                                                                    style={ { width: '300px', height: '150px' } }
+                                                                />
+                                                            )
+                                                        } else {
+                                                            return (
+                                                                <>
+                                                                { key + ': ' + item[key] + ' ' }
+                                                                </>
+                                                            )
+                                                        }
+                                                    } 
+                                                )
+                                            }
+                                        </>
+                                    </div>
+                                )
+                            }
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AbstractWebsocket

src/components/forms/formGenerator.js

@@ -0,0 +1,669 @@
+import React, { useState } from 'react'
+
+import passwordVisibleImg from '../../images/password-visible.png'
+import passwordHiddenImg from '../../images/password-hidden.png'
+
+/**
+ *
+ * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
+ * @param { [] } refList - react ref objects list for handler validation
+ * @param { } action - fetch method
+ */
+export const FormGenerator = ({
+    inputList, refList,
+    action
+}) => {
+
+    const handler = async (event) => {
+        event.preventDefault()
+
+        if ( inputList[0].action === 'Async' ) {
+            await action(refList)
+        } else if (
+             inputList[0].action === 'Download'
+             || inputList[0].action === 'Upload'
+        ) {
+            await action()
+        } else {
+            for (let i = 0; i < refList.length; i++) {
+                if (refList[i].current.value === ''
+                    && inputList[0].action !== 'Update'
+                    || i === 0
+                    && refList.length !== 1
+                ) {
+                    refList[i].current.focus()
+                } else if (i === refList.length - 1) {
+                    await action(refList)
+                }
+            }
+        }
+    }
+
+    let info
+
+    return (
+        <form onSubmit={event => handler(event)} className="form">
+            {
+                inputList.map((input, key) => {
+
+                    if (input.type === 'info') {
+                        info = input
+                    } else if (input.type === 'text') {
+                        return (
+                            <TextInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'password') {
+                        return (
+                            <PasswordInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'links-listing') {
+                        return (
+                            <DownloadFilesListInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'file') {
+                        return (
+                            <UploadInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'choice-listing') {
+                        return (
+                            <ChoiceListingGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'range') {
+                        return (
+                            <RangeInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'vector') {
+                        return (
+                            <VectorInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    }
+                })
+            }
+            {
+                info.button_value === ''
+                ? <></>
+                : <button
+                      type='submit'
+                      disabled={ info.allowButtonAction }
+                      className={ info.allowButtonAction === false ? "button-disabled" : "" }
+                  >
+                      { info.button_value }
+                  </button>
+            }
+
+        </form>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  type: 'text',
+ *  name: 'name',
+ *  ref: React.createRef(),
+ *  onChange: null OR validationFunc
+ *  validationInfo: null OR useState("")
+ * }    } input - basic text input
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update',
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const TextInputGenerator = ({
+    input, info
+}) => {
+
+    const [textInputValidationInfo, setTextInputValidationInfo] = useState("Empty")
+
+    const inputRegex = /^[^'";<>=]+$/
+
+    const defaultValidation = (event) => {
+        if (event.target.value === "") {
+            setTextInputValidationInfo("Empty")
+        } else if (!inputRegex.test(event.target.value)) {
+            setTextInputValidationInfo("Please provide correct value")
+        } else {
+            setTextInputValidationInfo("Success")
+        }
+    }
+
+    return (
+        <div className="form-field">
+            <label>
+                {input.name}
+            </label>
+            <input
+                id={input.name + info.action + info.endpoint + 'Input'}
+                autoComplete='off'
+                ref={input.ref}
+                onChange={ input.onChange === null ? defaultValidation : input.onChange}
+                className={
+                    [ "Empty", "Success"].includes(
+                        input.validationInfo === null ? textInputValidationInfo : input.validationInfo
+                    ) ? "" : "input-incorrect"
+                }
+            />
+            <div
+                className="popup"
+                style={
+                    [ "Empty", "Success"].includes(
+                        input.validationInfo === null ? textInputValidationInfo : input.validationInfo
+                    ) ? {"display": "none", "height": "0px"} : {"display": "block"}
+                }
+            >
+                <div className="popup-content">
+                    { input.validationInfo === null ? textInputValidationInfo : input.validationInfo }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  type: 'password',
+ *  name: 'name',
+ *  ref: React.createRef()
+ * }    } input - basic text input
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const PasswordInputGenerator = ({
+    input, info
+}) => {
+
+    const [contentIsHidden, setContentIsHidden] = useState(true)
+
+    return (
+        <div className="form-field">
+            <label>
+                { input.name }
+            </label>
+            <div className="horizontal-container-input">
+                <input
+                    id={input.name + info.action + info.endpoint + 'Input'}
+                    autoComplete='off'
+                    ref={input.ref}
+                    type={ contentIsHidden ? 'password' : 'text' }
+                    onChange={input.onChange}
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
+                />
+                <img
+                    src={ contentIsHidden ? passwordHiddenImg : passwordVisibleImg }
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-visible-incorrect" }
+                    onClick={ () => { setContentIsHidden(!contentIsHidden) } }
+                />
+            </div>
+            <div
+                className="popup"
+                style={ [ "Empty", "Success"].includes(input.validationInfo) ? {"display": "none", "height": "0px"} : {"display": "block"} }
+            >
+                <div className="popup-content">
+                    { input.validationInfo }
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+const ObjectIterator = ({
+    object, divPlacer
+}) => {
+    return(
+        <>
+            {
+                typeof object == "object" ?
+
+                    Object.keys( object ).map(
+                        ( key ) => {
+                            return (
+                                <div key={ key }>
+                                    { divPlacer( object[key] ) }
+                                </div>
+                            )
+                        }
+                    )
+                :
+
+                    object
+            }
+        </>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  type: 'drop-box',
+ *  name: 'name',
+ *  values: list,
+ *  link: link to the file
+ * }    } input - basic text input
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const DownloadFilesListInputGenerator = ({
+    input, info
+}) => {
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'DropBox'}
+        >
+            {input.name + ':'}
+            {
+                input.values.length == 0 ?
+
+                () => {
+                        return (
+                            <div>
+                                empty
+                            </div>
+                        )
+                }
+
+                : input.values.map( (item, index) => {
+
+                        return (
+                            <>
+                                <div
+                                    key={ info.action + '_element_' + index }
+                                    ls={ item }
+                                >
+                                    {
+                                        typeof item == 'string' ?
+
+                                            item
+
+                                        : Object.keys(item).map(
+                                            ( key, index ) => {
+
+                                                return(
+                                                    <div style={{ paddingLeft: '10px' }}>
+                                                        { key + ': ' }
+                                                        {
+                                                            typeof item[key] === "object" ?
+
+                                                                Object.keys( item[key] ).map(
+                                                                    ( key_two, index ) => {
+                                                                        return (
+                                                                            <div style={{ paddingLeft: '20px' }}>
+                                                                                { 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 + ": " }
+                                                                                                            { "x: " + item[key][key_two][key_three].x + ", " }
+                                                                                                            { "y: " + item[key][key_two][key_three].y + ", " }
+                                                                                                            { "z: " + item[key][key_two][key_three].z + ", " }
+                                                                                                    </div>
+                                                                                                )
+                                                                                            }
+                                                                                        )
+
+                                                                                    :
+
+                                                                                        item[key][key_two]
+                                                                                }
+
+                                                                            </div>
+                                                                        )
+                                                                    }
+                                                                )
+
+                                                            :
+
+                                                                item[key]
+                                                        }
+                                                    </div>
+
+                                                )
+                                            }
+                                        )
+                                    }
+                                    <br />
+                                    <br />
+                                    <a
+                                        href={ input.link + index + '/' }
+                                    >
+                                        download
+                                    </a>
+                                </div>
+                                <div style={{ width: '100%', height: '1px', backgroundColor: '#008000' }}>
+                                </div>
+                            </>
+                        )
+
+                    }
+                )
+            }
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  type: 'chice-listing',
+ *  name: 'name',
+ *  values: list,
+ *  ref: React.createRef()
+ * }    } input - basic text input
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const ChoiceListingGenerator = ({
+    input, info
+}) => {
+
+    const __handleRef = ( event ) => {
+        event.preventDefault()
+        input.ref.current = {
+            value: event.target.value
+        }
+    }
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'ChoiceListing'}
+        >
+            {input.name + ':'}
+            <select
+                onChange={ (event) => __handleRef( event ) }
+            >
+                <option
+                    value={ '--Select-Model--' }
+                >
+                    --Select-Model--
+                </option>
+            {
+                input.values.map( (item) => {
+                        return (
+                            <option
+                                key={ item.model }
+                                value={ item.model }
+                            >
+                                    { item.model.replace('.blend', '') }
+                            </option>
+                        )
+                    }
+                )
+            }
+            </select>
+        </div>
+    )
+}
+
+/**
+ * Upload file input generator, example:
+ * @param {
+ * {
+ *  type: 'file',
+ *  name: 'name',
+ *  endpoint: 'Album',
+ *  fileType: 'image' or 'audio',
+ *  dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState
+ *  file: file, setFile: setFile()  #useState
+ * }    } input -
+ */
+const UploadInputGenerator = ({
+    input, info
+}) => {
+
+    const onLoadFile = async (event) => {
+        event.preventDefault()
+        let data = event.target.files[0]
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
+        setDropInfos(data.name, data.size)
+    }
+
+    const onLoadFileDrop = async (event) => {
+        event.preventDefault()
+        event.persist()
+        let data = event.dataTransfer.files[0]
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
+        setDropInfos(data.name, data.size)
+    }
+
+    const toBase64 = async (file) => new Promise((resolve, reject) => {
+        let fileReader = new FileReader()
+        fileReader.readAsDataURL(file)
+        fileReader.onload = () => resolve(fileReader.result)
+        fileReader.onerror = error => reject(error)
+    })
+
+    const setDropInfos = (name, size) => {
+        input.setDropInfo(
+            'name: "'
+            + name
+            + '"\nsize: '
+            + (Math.round(size / 100 + 'e-2') / 100)
+            + ' MB'
+        )
+    }
+
+    return (
+        <div onDrop={event => onLoadFileDrop(event)} >
+            <pre style={{ marginLeft: '40px' }}>
+                {input.dropInfo}
+            </pre>
+            <input
+                style={{ marginTop: '-55px' }}
+                id={input.name + info.action + info.endpoint + 'Input'}
+                className='upload_input'
+                type='file'
+                accept={input.fileType + '/*'}
+                autoComplete='off'
+                onChange={event => onLoadFile(event)}
+            />
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  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
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const RangeInputGenerator = ({
+    input, info
+}) => {
+
+    let name = input.name + info.action + info.endpoint + 'Input'
+
+    const [value, setValue] = useState(0)
+
+    return (
+        <div>
+            <div>
+                {input.name + ': ' + value + ' ' + input.unit }
+            </div>
+            <input
+                style={ { width: '380px' } }
+                id={name}
+                name={name}
+                min={input.min}
+                max={input.max}
+                defaultValue={input.min}
+                step={input.step}
+                ref={input.ref}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+        </div>
+    )
+}
+
+const RangeGenerator = ({
+    key,
+    label,
+    labelStyle,
+    valueStyle,
+    style,
+    name,
+    unit,
+    min,
+    max,
+    defaultValue,
+    step,
+    reference
+}) => {
+
+    const [value, setValue] = useState(0)
+
+    return (
+        <div style={ { display: 'flex' } }>
+            <div style={ labelStyle }>
+                { label + ': ' }
+            </div>
+            <input
+                key={key}
+                style={ style }
+                id={ name }
+                name={ name }
+                min={min}
+                max={max}
+                defaultValue={ defaultValue }
+                step={step}
+                ref={reference}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+            <div style={ valueStyle }>
+                { value + ' ' + unit }
+            </div>
+        </div>
+    )
+
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {
+ *  type: 'vector',
+ *  name: 'name',
+ *  refDict:
+ *  {
+ *      x: React.createRef(),
+ *      y: React.createRef(),
+ *      z: React.createRef()
+ *  }
+ * }    } input - basic text input
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const VectorInputGenerator = ({
+    input, info
+}) => {
+
+    return (
+        <div style={ { width: '' } }>
+            <div style={ { width: '100%' } }>
+                { input.name }
+            </div>
+            <div style={ { display: 'flex' } }>
+                {
+                    Object.keys(input.refDict).map( (key) => {
+
+                            let name = input.name + key + info.action + info.endpoint + 'Input'
+                            return (
+                                <div style={ { display: 'flex', width: '140px' } }>
+                                    <RangeGenerator
+                                        key={key}
+                                        label={key}
+                                        labelStyle={ { width: '5px', marginTop: '15px' } }
+                                        valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
+                                        style={ { width: '80px' } }
+                                        name={name}
+                                        unit={ '' }
+                                        min={input.min[key]}
+                                        max={input.max[key]}
+                                        defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
+                                        step={0.1}
+                                        reference={input.refDict[key]}
+                                    />
+                                </div>
+                            )
+                        }
+                    )
+                }
+            </div>
+        </div>
+    )
+}
+
+
+export default FormGenerator

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
+
+import FormGenerator from '../formGenerator'
+
+
+const ModelShowAndDownloadForm = () => {
+
+    const dispatch = useDispatch()
+    
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let blocker = false
+
+    useEffect(
+        () => {
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        }
+    )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Download',
+            endpint: 'model/download',
+            button_value: 'Refresh Models List'
+        },
+        {
+            type: 'links-listing',
+            name: 'Models',
+            values: models_list,
+            link: GeneralAddress + '/model/',
+        }
+    ]
+
+    const handleRefresh = () => {
+        dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%' , overflowY: 'scroll', height: '500px' } }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleRefresh }
+            />
+        </div>
+    )
+
+}
+
+export default ModelShowAndDownloadForm

src/components/forms/model_crud/modelUpload.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const ModelUploadForm = () => {
+
+    const dispatch = useDispatch()
+
+    const [blend, setBlend] = useState('')
+    const [blendInfo, setBlendInfo] = useState('Drop/Click\nfor upload "*.blend" file')
+    
+    const { upload_blend_file_status } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Upload',
+            endpint: 'model/upload',
+            button_value: 'Upload Model'
+        },
+        {
+            type: 'file',
+            name: 'Model',
+            fileType: 'blender',
+            dropInfo: blendInfo,
+            setDropInfo: setBlendInfo,
+            file: blend,
+            setFile: setBlend
+        }
+    ]
+
+    const handleModelUpload = () => {
+        let body = {
+            user_id: user.id,
+            file: blend,
+            token: token
+        }
+        console.log( body )
+        dispatch( modelCrudAsyncThunk.fetchUploadModel( body ) )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleModelUpload }
+            />
+            <p>
+                {   
+                    typeof upload_blend_file_status === 'string'
+                    ? ''
+                    : 'info' in upload_blend_file_status 
+                        ? upload_blend_file_status.info
+                        : ''
+                }
+            </p>
+        </div>
+    )
+}
+
+export default ModelUploadForm

src/components/forms/render_crud/renderShowReadyRendersAndDownload.js

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { renderCrudSelector } from '../../../redux/slices/renderCrudSlice'
+import renderCrudAsyncThunk from '../../../redux/asyncThunks/renderCrudAsyncThunk'
+
+import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
+
+import FormGenerator from '../formGenerator'
+
+
+const RenderShowAndDownloadForm = () => {
+
+    const dispatch = useDispatch()
+    
+    const { render_list } = useSelector( renderCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let blocker = false
+
+    useEffect(
+        () => {
+            if ( render_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
+                dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
+                if ( render_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        }
+    )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Download',
+            endpint: 'model/download',
+            button_value: 'Refresh Renders List'
+        },
+        {
+            type: 'links-listing',
+            name: 'Renders',
+            values: render_list,
+            link: GeneralAddress + '/render/',
+        }
+    ]
+
+    const handleRefresh = () => {
+        dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
+    }
+
+    return (
+        <div className='float_form_render_sync'>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleRefresh }
+            />
+        </div>
+    )
+
+}
+
+export default RenderShowAndDownloadForm

src/components/forms/render_websocket/renderAll.js

@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const RenderAllForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const rotateRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        rotateRange,
+        resolutionXRange,
+        resolutionYRange,
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/all',
+            button_value: 'Render All Sets'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+    ]
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            resolutionX: refs[2].current.value,
+            resolutionY: refs[3].current.value,
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/all/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderAllForm

src/components/forms/render_websocket/renderSingleImage.js

@@ -0,0 +1,136 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const RenderSingleImageForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const setIdRange = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        setIdRange,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/image',
+            button_value: 'Render Single Image'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Set ID',
+            min: 0,
+            max: 87,
+            step: 1,
+            unit: 'set',
+            ref: setIdRange
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            setID: refs[1].current.value,
+            rotate: refs[2].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[3].current.value,
+            nameSeries: 0,
+            resolutionX: refs[4].current.value,
+            resolutionY: refs[5].current.value
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/single/image/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderSingleImageForm

src/components/forms/render_websocket/renderSingleSet.js

@@ -0,0 +1,134 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const RenderSingleSetForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const setIdRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+    const angleRange = React.createRef()
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        setIdRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        angleRange
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/set',
+            button_value: 'Render Single Set'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Set ID',
+            min: 0,
+            max: 87,
+            step: 1,
+            unit: 'set',
+            ref: setIdRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: angleRange
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            setID: refs[1].current.value,
+            cameraID: refs[2].current.value,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            angle: refs[5].current.value / 62, // on backend 0.1 - 6.2 value
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderSingleSetForm

src/components/forms/render_websocket/renderVectorImage.js

@@ -0,0 +1,445 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const refVectorGenerator = () => {
+    return {
+        x: React.createRef(),
+        y: React.createRef(),
+        z: React.createRef(),
+    }
+}
+
+
+const RenderVectorSingleImageForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    // const IK_nadgarstek = refVectorGenerator()
+    // const IK_joint3_R = refVectorGenerator()
+    // const IK_joint4_R = refVectorGenerator() 
+    // const IK_joint5_R = refVectorGenerator() 
+    // const IK_joint6_R = refVectorGenerator() 
+    const IK_maly_1_R = refVectorGenerator()
+    const IK_maly_2_R = refVectorGenerator()
+    const IK_maly_3_R = refVectorGenerator()
+    const IK_serdeczny_1_R = refVectorGenerator() 
+    const IK_serdeczny_2_R = refVectorGenerator() 
+    const IK_serdeczny_3_R = refVectorGenerator() 
+    const IK_srodkowy_1_R = refVectorGenerator() 
+    const IK_srodkowy_2_R = refVectorGenerator() 
+    const IK_srodkowy_3_R = refVectorGenerator() 
+    const IK_wskazujacy_1_R = refVectorGenerator() 
+    const IK_wskazujacy_2_R = refVectorGenerator() 
+    const IK_wskazujacy_3_R = refVectorGenerator() 
+    const IK_kciuk_0_R = refVectorGenerator()
+    const IK_kciuk_1_R = refVectorGenerator() 
+    const IK_kciuk_2_R = refVectorGenerator()
+
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        {
+            // IK_nadgarstek: IK_nadgarstek,
+            // IK_joint3_R: IK_joint3_R,
+            // IK_joint4_R: IK_joint4_R,
+            // IK_joint5_R: IK_joint5_R, 
+            // IK_joint6_R: IK_joint6_R, 
+            IK_maly_1_R: IK_maly_1_R,
+            IK_maly_2_R: IK_maly_2_R,
+            IK_maly_3_R: IK_maly_3_R,
+            IK_serdeczny_1_R: IK_serdeczny_1_R, 
+            IK_serdeczny_2_R: IK_serdeczny_2_R, 
+            IK_serdeczny_3_R: IK_serdeczny_3_R, 
+            IK_srodkowy_1_R: IK_srodkowy_1_R, 
+            IK_srodkowy_2_R: IK_srodkowy_2_R, 
+            IK_srodkowy_3_R: IK_srodkowy_3_R, 
+            IK_wskazujacy_1_R: IK_wskazujacy_1_R, 
+            IK_wskazujacy_2_R: IK_wskazujacy_2_R, 
+            IK_wskazujacy_3_R: IK_wskazujacy_3_R, 
+            IK_kciuk_0_R: IK_kciuk_0_R,
+            IK_kciuk_1_R: IK_kciuk_1_R, 
+            IK_kciuk_2_R: IK_kciuk_2_R,
+        }
+    ]
+
+    const fingers_max = {
+        x: 10,
+        y: 10,
+        z: 10
+    }
+    const fingers_min = {
+        x: -0.7,
+        y: -0.7,
+        z: -0.7
+    }
+
+    const validate_fingers = {
+        thumb: {
+            max:{ 
+                part_0: {
+                    y: 0.5,
+                    x: 0.5,
+                    z: 0.6
+                },
+                part_1: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                }
+            },
+            min: {
+                part_0: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3,
+                },
+                part_1: {
+                    y: -0.1,
+                    x: 0,
+                    z: 0,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: -0.4,
+                }
+            }
+        },
+        others: {
+            max: {
+                part_1: {
+                    y: 0.2,
+                    x: 0,
+                    z: 0.7
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 1.6
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7
+                }
+            },
+            min: {
+                part_1: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                }
+            }
+        }
+
+    }
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/image',
+            button_value: 'Render Single Image'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+        // {
+        //     type: 'vector',
+        //     name: 'Wirst (experimental)',
+        //     native: 'Nadgarstek',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_nadgarstek,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Litte Finger Joint 3 (experimental)',
+        //     native: 'Mały Palec Joint 3',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint3_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Ring Finger Joint 4 (experimental)',
+        //     native: 'Serdeczny Palec Joint 4',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint4_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Middle Finger Joint 5 (experimental)',
+        //     native: 'Środkowy Palec Joint 5',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint5_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Index Finger Joint 6 (experimental)',
+        //     native: 'Wskazujący Palec Joint 6',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint6_R,
+        // },
+        {
+            type: 'vector',
+            name: 'Litte Finger 1',
+            native: 'Mały 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_maly_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 2',
+            native: 'Mały 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_maly_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 3',
+            native: 'Mały 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_maly_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 1',
+            native: 'Serdeczny 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_serdeczny_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 2',
+            native: 'Serdeczny 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_serdeczny_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 3',
+            native: 'Serdeczny 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_serdeczny_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 1',
+            native: 'Środkowy 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_srodkowy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 2',
+            native: 'Środkowy 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_srodkowy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 3',
+            native: 'Środkowy 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_srodkowy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 1',
+            native: 'Wskazujący 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_wskazujacy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 2',
+            native: 'Wskazujący 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_wskazujacy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 3',
+            native: 'Wskazujący 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_wskazujacy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 0',
+            native: 'Kciuk 0',
+            min: validate_fingers.thumb.min.part_0,
+            max: validate_fingers.thumb.max.part_0,
+            refDict: IK_kciuk_0_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 1',
+            native: 'Kciuk 1',
+            min: validate_fingers.thumb.min.part_1,
+            max: validate_fingers.thumb.max.part_1,
+            refDict: IK_kciuk_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 2',
+            native: 'Kciuk 2',
+            min: validate_fingers.thumb.min.part_2,
+            max: validate_fingers.thumb.max.part_2,
+            refDict: IK_kciuk_2_R,
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+
+        let vectors = {}
+
+        console.log( refs )
+
+        Object.keys(refs[5]).map(
+            ( key ) => {
+                let singleFinger = {
+                    scale: 0,
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }
+                singleFinger['scale'] = 0.9
+                singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
+                singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
+                singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
+                vectors[key] = singleFinger
+            }
+        )
+
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            nameSeries: 0,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            vectors: vectors
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/image/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderVectorSingleImageForm

src/components/forms/render_websocket/renderVectorSet.js

@@ -0,0 +1,444 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const refVectorGenerator = () => {
+    return {
+        x: React.createRef(),
+        y: React.createRef(),
+        z: React.createRef(),
+    }
+}
+
+
+const RenderVectorSingleSetForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    // const IK_nadgarstek = refVectorGenerator()
+    // const IK_joint3_R = refVectorGenerator()
+    // const IK_joint4_R = refVectorGenerator() 
+    // const IK_joint5_R = refVectorGenerator() 
+    // const IK_joint6_R = refVectorGenerator() 
+    const IK_maly_1_R = refVectorGenerator()
+    const IK_maly_2_R = refVectorGenerator()
+    const IK_maly_3_R = refVectorGenerator()
+    const IK_serdeczny_1_R = refVectorGenerator() 
+    const IK_serdeczny_2_R = refVectorGenerator() 
+    const IK_serdeczny_3_R = refVectorGenerator() 
+    const IK_srodkowy_1_R = refVectorGenerator() 
+    const IK_srodkowy_2_R = refVectorGenerator() 
+    const IK_srodkowy_3_R = refVectorGenerator() 
+    const IK_wskazujacy_1_R = refVectorGenerator() 
+    const IK_wskazujacy_2_R = refVectorGenerator() 
+    const IK_wskazujacy_3_R = refVectorGenerator() 
+    const IK_kciuk_0_R = refVectorGenerator()
+    const IK_kciuk_1_R = refVectorGenerator() 
+    const IK_kciuk_2_R = refVectorGenerator()
+
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        {
+            // IK_nadgarstek: IK_nadgarstek,
+            // IK_joint3_R: IK_joint3_R,
+            // IK_joint4_R: IK_joint4_R,
+            // IK_joint5_R: IK_joint5_R, 
+            // IK_joint6_R: IK_joint6_R, 
+            IK_maly_1_R: IK_maly_1_R,
+            IK_maly_2_R: IK_maly_2_R,
+            IK_maly_3_R: IK_maly_3_R,
+            IK_serdeczny_1_R: IK_serdeczny_1_R, 
+            IK_serdeczny_2_R: IK_serdeczny_2_R, 
+            IK_serdeczny_3_R: IK_serdeczny_3_R, 
+            IK_srodkowy_1_R: IK_srodkowy_1_R, 
+            IK_srodkowy_2_R: IK_srodkowy_2_R, 
+            IK_srodkowy_3_R: IK_srodkowy_3_R, 
+            IK_wskazujacy_1_R: IK_wskazujacy_1_R, 
+            IK_wskazujacy_2_R: IK_wskazujacy_2_R, 
+            IK_wskazujacy_3_R: IK_wskazujacy_3_R, 
+            IK_kciuk_0_R: IK_kciuk_0_R,
+            IK_kciuk_1_R: IK_kciuk_1_R, 
+            IK_kciuk_2_R: IK_kciuk_2_R,
+        }
+    ]
+
+    const fingers_max = {
+        x: 10,
+        y: 10,
+        z: 10
+    }
+    const fingers_min = {
+        x: -0.7,
+        y: -0.7,
+        z: -0.7
+    }
+
+    const validate_fingers = {
+        thumb: {
+            max:{ 
+                part_0: {
+                    y: 0.5,
+                    x: 0.5,
+                    z: 0.6
+                },
+                part_1: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                }
+            },
+            min: {
+                part_0: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3,
+                },
+                part_1: {
+                    y: -0.1,
+                    x: 0,
+                    z: 0,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: -0.4,
+                }
+            }
+        },
+        others: {
+            max: {
+                part_1: {
+                    y: 0.2,
+                    x: 0,
+                    z: 0.7
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 1.6
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7
+                }
+            },
+            min: {
+                part_1: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                }
+            }
+        }
+
+    }
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/set',
+            button_value: 'Render Single Set'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+        // {
+        //     type: 'vector',
+        //     name: 'Wirst (experimental)',
+        //     native: 'Nadgarstek',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_nadgarstek,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Litte Finger Joint 3 (experimental)',
+        //     native: 'Mały Palec Joint 3',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint3_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Ring Finger Joint 4 (experimental)',
+        //     native: 'Serdeczny Palec Joint 4',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint4_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Middle Finger Joint 5 (experimental)',
+        //     native: 'Środkowy Palec Joint 5',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint5_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Index Finger Joint 6 (experimental)',
+        //     native: 'Wskazujący Palec Joint 6',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint6_R,
+        // },
+        {
+            type: 'vector',
+            name: 'Litte Finger 1',
+            native: 'Mały 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_maly_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 2',
+            native: 'Mały 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_maly_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 3',
+            native: 'Mały 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_maly_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 1',
+            native: 'Serdeczny 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_serdeczny_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 2',
+            native: 'Serdeczny 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_serdeczny_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 3',
+            native: 'Serdeczny 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_serdeczny_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 1',
+            native: 'Środkowy 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_srodkowy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 2',
+            native: 'Środkowy 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_srodkowy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 3',
+            native: 'Środkowy 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_srodkowy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 1',
+            native: 'Wskazujący 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_wskazujacy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 2',
+            native: 'Wskazujący 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_wskazujacy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 3',
+            native: 'Wskazujący 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_wskazujacy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 0',
+            native: 'Kciuk 0',
+            min: validate_fingers.thumb.min.part_0,
+            max: validate_fingers.thumb.max.part_0,
+            refDict: IK_kciuk_0_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 1',
+            native: 'Kciuk 1',
+            min: validate_fingers.thumb.min.part_1,
+            max: validate_fingers.thumb.max.part_1,
+            refDict: IK_kciuk_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 2',
+            native: 'Kciuk 2',
+            min: validate_fingers.thumb.min.part_2,
+            max: validate_fingers.thumb.max.part_2,
+            refDict: IK_kciuk_2_R,
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+
+        let vectors = {}
+
+        console.log( refs )
+
+        Object.keys(refs[5]).map(
+            ( key ) => {
+                let singleFinger = {
+                    scale: 0,
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }
+                singleFinger['scale'] = 0.9
+                singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
+                singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
+                singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
+                vectors[key] = singleFinger
+            }
+        )
+
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            vectors: vectors
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderVectorSingleSetForm

src/components/forms/user_auth/userLogin.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react'
+
+// import { useSelector, useDispatch } from 'react-redux'
+
+// import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+// import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserLoginForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+
+    // const dispatch = useDispatch()
+    // const { info } = useSelector( userAuthSelector )
+    const info = "" // if redux is integrated - delete this line
+
+    let refList = [
+        usernameInput,
+        passwordInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth',
+            button_value: 'CONTINUE'
+        },
+        {
+            type: 'text',
+            name: 'EMAIL',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'PASSWORD',
+            ref: passwordInput
+        }
+    ]
+
+    const login = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value
+        }
+        // dispatch(
+        //     userAuthAsyncThunk.fetchLogin(
+        //         pass
+        //     )
+        // )
+    }
+
+    return (
+        <div>
+            <FormGenerator
+                inputList={ inputList }
+                refList={ refList }
+                action={ login }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserLoginForm

src/components/forms/user_auth/userRegister.js

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react'
+
+// import { useSelector, useDispatch } from 'react-redux'
+
+// import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+// import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserRegisterForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const confirmPasswordInput = React.createRef()
+
+    const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+
+    const [usernameValidationInfo, setUsernameValidationInfo] = useState("Empty")
+    const [passwordValidationInfo, setPasswordValidationInfo] = useState("Empty")
+    const [confirmPasswordValidationInfo, setConfirmPasswordValidationInfo] = useState("Empty")
+
+    const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+
+    const [allowButtonAction, setAllowButtonAction] = useState(false)
+
+    const usernameValidation = (event) => {
+        if (event.target.value === "") {
+            setUsernameValidationInfo("Email is required.")
+        } else if(!emailRegex.test(event.target.value)) {
+            setUsernameValidationInfo("Please provide correct email")
+        } else {
+            setUsernameValidationInfo("Success")
+        }
+    }
+
+    const passwordValidation = (event) => {
+
+        setPassword(event.target.value)
+
+        if (event.target.value === "") {
+            setPasswordValidationInfo("Password is required.")
+        } else if(!passwordRegex.test(event.target.value)) {
+            setPasswordValidationInfo("Password require:\n - At least 8 characters,\n - At least one uppercase letter,\n - At least one lowercase letter,\n - At least one digit,\n - At least one special character.")
+        } else {
+            setPasswordValidationInfo("Success")
+        }
+
+        if(event.target.value !== confirmPassword) {
+            setConfirmPasswordValidationInfo("Passwords are different.")
+        } else {
+            setConfirmPasswordValidationInfo("Success")
+        }
+    }
+
+    const confirmPasswordValidation = (event) => {
+
+        setConfirmPassword(event.target.value)
+
+        if(event.target.value !== password) {
+            setConfirmPasswordValidationInfo("Passwords are different.")
+        } else {
+            setConfirmPasswordValidationInfo("Success")
+        }
+    }
+
+    useEffect(() => {
+            setAllowButtonAction(
+                usernameValidationInfo === "Success"
+                && passwordValidationInfo === "Success"
+                && confirmPasswordValidationInfo === "Success"
+            )
+        }, [
+            allowButtonAction,
+            usernameValidationInfo,
+            passwordValidationInfo,
+            confirmPasswordValidationInfo
+        ]
+    )
+
+
+    // const dispatch = useDispatch()
+    // const { info } = useSelector( userCrudSelector )
+    const info = "" // if redux is integrated - delete this line
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        confirmPasswordInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth/register',
+            button_value: 'SIGN UP',
+            allowButtonAction: allowButtonAction
+        },
+        {
+            type: 'text',
+            name: 'EMAIL',
+            ref: usernameInput,
+            onChange: usernameValidation,
+            validationInfo: usernameValidationInfo
+        },
+        {
+            type: 'password',
+            name: 'PASSWORD',
+            ref: passwordInput,
+            onChange: passwordValidation,
+            validationInfo: passwordValidationInfo
+        },
+        {
+            type: 'password',
+            name: 'CONFIRM PASSWORD',
+            ref: confirmPasswordInput,
+            onChange: confirmPasswordValidation,
+            validationInfo: confirmPasswordValidationInfo
+        }
+    ]
+
+    const register = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value
+        }
+        // dispatch(
+        //     userCrudAsyncThunk.fetchRegister(
+        //         pass
+        //     )
+        // )
+    }
+
+    return (
+        <div>
+            <FormGenerator
+                inputList={ inputList }
+                refList={ refList }
+                action={ register }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserRegisterForm

src/components/forms/user_crud/userDelete.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+
+import { deleteUser } from '../../../redux/slices/userAuthSlice'
+
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserDeleteForm = () => {
+
+    const usernameInput = React.createRef()
+
+    const { user, token } = useSelector( userAuthSelector )
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+
+    let refList = [
+        usernameInput,
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/delete',
+            button_value: 'Delete'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        }
+    ]
+
+    const handleDelete = async ( refs ) => {
+        if ( refs[0].current.value === user.username ) {
+            let pass = {
+                token: token,
+                user_id: user.id
+            }
+            dispatch(
+                deleteUser()
+            )
+            dispatch(
+                userCrudAsyncThunk.fetchDeleteUser(
+                    pass
+                )
+            )
+        }
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ handleDelete }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserDeleteForm

src/components/forms/user_crud/userUpdate.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserUpdateForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const emailInput = React.createRef()
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/update',
+            button_value: 'Update User'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        },
+        {
+            type: 'text',
+            name: 'Email',
+            ref: emailInput
+        }
+    ]
+
+    const update = async ( refs ) => {
+        let pass = {
+            user_id: user.id,
+            token: token,
+            user: {
+                username: refs[0].current.value,
+                password: refs[1].current.value,
+                email: refs[2].current.value,
+            }
+        }
+        dispatch(
+            userCrudAsyncThunk.fetchUpdateUser(
+                pass
+            )
+        )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ update }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserUpdateForm

src/components/largeCube.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import '../styles/large.cube.scss';
+
+
+const LargeCubeComponent = () => {
+    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 LargeCubeComponent

src/components/navbar.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import '../styles/general.scss';
+
+import SmallCubeComponent from './smallCube.js';
+
+
+const NavBarComponent = () => {
+    return (
+        <div className="navbar">
+            <div className="content-container">
+                <div className="content">
+                    <div className="section">
+                        <SmallCubeComponent />
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                        <h4>Menu |||</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+export default NavBarComponent

src/components/smallCube.js

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

src/pages/404.js

@@ -1,54 +0,0 @@
-import * as React from "react"
-import { Link } from "gatsby"
-
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-}
-
-const paragraphStyles = {
-  marginBottom: 48,
-}
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-}
-
-// markup
-const NotFoundPage = () => {
-  return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
-  )
-}
-
-export default NotFoundPage

src/pages/index.js

@@ -1,150 +1,13 @@
-import * as React from "react"
+import React from 'react';
 
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-}
-const headingAccentStyles = {
-  color: "#663399",
-}
-const paragraphStyles = {
-  marginBottom: 48,
-}
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-}
-const listStyles = {
-  marginBottom: 96,
-  paddingLeft: 0,
-}
-const listItemStyles = {
-  fontWeight: "300",
-  fontSize: "24px",
-  maxWidth: "560px",
-}
+import LoginPage from './user/login.js';
+import LandingPage from './landing.js';
 
-const linkStyle = {
-  color: "#8954A8",
-  fontWeight: "bold",
-  fontSize: "16px",
-  verticalAlign: "5%",
-}
-
-const docLinkStyle = {
-  ...linkStyle,
-  listStyleType: "none",
-  marginBottom: 24,
-}
-
-const descriptionStyle = {
-  color: "#232129",
-  fontSize: "14px",
-}
-
-const docLink = {
-  text: "Documentation",
-  url: "https://www.gatsbyjs.com/docs/",
-  color: "#8954A8",
-}
-// data
-const links = [
-  {
-    text: "Tutorial",
-    url: "https://www.gatsbyjs.com/docs/tutorial/",
-    description:
-      "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
-    color: "#E95800",
-  },
-  {
-    text: "How to Guides",
-    url: "https://www.gatsbyjs.com/docs/how-to/",
-    description:
-      "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
-    color: "#1099A8",
-  },
-  {
-    text: "Reference Guides",
-    url: "https://www.gatsbyjs.com/docs/reference/",
-    description:
-      "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
-    color: "#BC027F",
-  },
-  {
-    text: "Conceptual Guides",
-    url: "https://www.gatsbyjs.com/docs/conceptual/",
-    description:
-      "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
-    color: "#0D96F2",
-  },
-  {
-    text: "Plugin Library",
-    url: "https://www.gatsbyjs.com/plugins",
-    description:
-      "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
-    color: "#000000",
-  },
-]
-
-// markup
 const IndexPage = () => {
     return (
-    <main style={pageStyles}>
-      <title>Home Page</title>
-      <h1 style={headingStyles}>
-        Congratulations
-        <br />
-        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
-        <span role="img" aria-label="Party popper emojis">
-          🎉🎉🎉
-        </span>
-      </h1>
-      <p style={paragraphStyles}>
-        Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
-        update in real-time.{" "}
-        <span role="img" aria-label="Sunglasses smiley emoji">
-          😎
-        </span>
-      </p>
-      <ul style={listStyles}>
-        <li style={docLinkStyle}>
-          <a
-            style={linkStyle}
-            href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
-          >
-            {docLink.text}
-          </a>
-        </li>
-        {links.map(link => (
-          <li key={link.url} style={{ ...listItemStyles, color: link.color }}>
-            <span>
-              <a
-                style={linkStyle}
-                href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
-              >
-                {link.text}
-              </a>
-              <p style={descriptionStyle}>{link.description}</p>
-            </span>
-          </li>
-        ))}
-      </ul>
-      <img
-        alt="Gatsby G Logo"
-        src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
-      />
-    </main>
+        <LandingPage />
     )
 }
 
+
 export default IndexPage

src/pages/landing.js

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import '../styles/general.scss';
+
+import UserRegisterForm from '../components/forms/user_auth/userRegister.js';
+import FootComponent from '../components/foot.js';
+import NavBarComponent from '../components/navbar.js';
+
+
+const LandingPage = () => {
+    return (
+        <>
+            <NavBarComponent />
+            <div className="landing-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 who need top-tier rendering
+                        <br />
+                        <span className="span-white">
+                             without the top-tier investment.
+                        </span>
+                    </p>
+                    <button>
+                        GET A DEMO
+                    </button>
+                    <h4>
+                        GPU IS IMPORTANT...
+                    </h4>
+                    <p>
+                        ...But <span className="span-white">GPU server can be very expensive.</span>
+                        <br />
+                        Configuration and administration<span className="span-white"> take too long time.</span>
+                        <br />
+                        <span className="span-white">
+                            Everything of that needs so much additional knowledge.
+                        </span>
+                    </p>
+                    <h2>
+                        We Offer Ready Solution.
+                    </h2>
+                    <p>
+                        Boost your GPU power for your 3D and AI models stuff
+                        <br />
+                        <span className="span-white">
+                            without overpay for servers...
+                        </span>
+                        <br />
+                        <span className="span-white">
+                            ...without overtime for environment adjustments!
+                        </span>
+                    </p>
+                    <h2>
+                        "OK... So What Makes You So Different?"
+                    </h2>
+                    <h4>
+                        GUARANTED
+                    </h4>
+                    <p>
+                        We only win if you win. You won't carry all the risk, we'll share it
+                    </p>
+                    <h4>
+                        RESLUTS
+                    </h4>
+                    <p>
+                        Our first priority is to get you results.
+                    </p>
+                    <h4>
+                        LOCAL
+                    </h4>
+                    <p>
+                    </p>
+                    <h4>
+                        SPECIALIZED
+                    </h4>
+                    <p>
+                    </p>
+                </header>
+                <main className="secondary-content">
+                    <UserRegisterForm />
+                </main>
+            </div>
+            <FootComponent />
+        </>
+    )
+}
+
+
+export default LandingPage

src/pages/user/login.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import '../../styles/general.scss';
+
+import LargeCubeComponent from '../../components/largeCube.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">
+                <LargeCubeComponent />
+                <UserLoginForm />
+            </main>
+        </div>
+    )
+}
+
+
+export default LoginPage

src/styles/general.000.scss

@@ -0,0 +1,104 @@
+// Define common variables
+$background-base-start: rgba(0, 90, 25, 1);
+$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: green;
+$border-color: green;
+$input-background: #222;
+$font-family-default: neue-haas-unica, sans-serif;
+$login-form-font-color: #a6a6a6;
+
+body, html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  font-family: $font-family-default;
+  font-weight: 680;
+  tab-size: 4;
+  background: radial-gradient($background-base-start, $background-base-end 70%);
+  color: white;
+  display: flex;
+  justify-content: center; // Center horizontally
+  align-items: center; // Center vertically
+}
+
+.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
+}
+
+.login-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0%;
+  border-radius: 5px;
+
+  .main-content {
+    //flex: 1;
+    //display: flex;
+    margin-top: 0%;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .login-form {
+      background: $form-background;
+      padding: 50px;
+      width: 350px;
+      color: $login-form-font-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;
+        }
+      }
+
+      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;
+      }
+    }
+
+    .graphic-container {
+      width: 400px;
+      height: 400px;
+      margin-right: auto;
+      margin-left: auto;
+      z-index: 1; // Lower z-index than the login form to place it behind
+    }
+  }
+}

src/styles/general.scss

@@ -0,0 +1,555 @@
+$first-color: rgba(0, 90, 25, 1);
+$secondary-color: white;
+$third-color: #242b2f;
+
+$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;
+    overflow-x: hidden;
+    font-family: $font-family-default;
+    tab-size: 4;
+    background: $background-color;
+    //    linear-gradient(
+    //        10deg,
+    //        black 0%,
+    //        #0a670a 40%,
+    //        #097309 50%,
+    //        #0a670a 60%,
+    //        black 100%
+    //    );
+
+  .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
+
+    h1 {
+        font-size: 72px;
+    }
+  }
+
+  .landing-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .landing {
+      text-align: center;
+      padding: 20px;
+      width: 100%;
+      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;
+      }
+
+      h3 {
+          font-size: 45px;
+          font-weight: 700;
+          color: $title-color;
+      }
+
+      h4 {
+          font-size: 30px;
+          font-weight: 700;
+          color: $title-color;
+          margin-bottom: 0px;
+      }
+
+      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 {
+    margin-top: 0%;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  .secondary-content {
+    width: 100%;
+    background: $form-background;
+
+    .form {
+      background: none;
+      margin-top: 0px;
+    }
+  }
+
+  .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 {
+      width: 100%;
+      margin-bottom: 15px;
+
+      label {
+        display: block;
+        margin-bottom: 15px;
+        text-align: left;
+        font-weight: 700;
+      }
+
+      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,120,0,1);
+      }
+
+      .input-correct {
+          background: rgba(0,120,0,1);
+          border: 1px solid $border-color;
+      }
+
+      .input-incorrect {
+          background: rgba(120,8,0,1);
+          border: 1px solid red;
+      }
+
+      .horizontal-container-input {
+        display: block;
+
+        input {
+          width: 80%;
+        }
+
+        img {
+          float: right;
+          width: 20px;
+          height: 20px;
+          padding-top: 5%;
+          filter: invert(27%) sepia(97%) saturate(3498%) hue-rotate(97deg) brightness(98%) contrast(103%);
+        }
+
+        // convert hex to filter: https://codepen.io/sosuke/pen/Pjoqqp
+
+        .input-visible-incorrect {
+          filter: invert(8%) sepia(63%) saturate(4888%) hue-rotate(8deg) brightness(113%) contrast(112%);
+        }
+      }
+    }
+
+    .popup {
+      margin-top: 10px;
+      overflow: hidden;
+      padding: 15px;
+      background: rgba(120,8,0,0.5);
+      border: 1px solid red;
+      border-radius: 5px;
+      white-space: pre-line;
+      transition-duration: 0.5s;
+
+      .popup-content {
+        margin: 0 auto;
+        text-align: left;
+      }
+    }
+
+    button {
+      padding: 5%;
+      width: 100%;
+      margin-top: 30px;
+      border-radius: 5px;
+      background: $button-background;
+      font-family: $font-family-default;
+      font-weight: 700;
+      color: rgba(0,0,0,0.5);
+      border: none;
+      cursor: pointer;
+      transition-duration: 0.1s;
+    }
+
+    button:hover {
+      background-color: green;
+      color: black
+    }
+
+    .button-disabled {
+      background: gray;
+    }
+  }
+
+  footer {
+    width: 70%;
+    background: $form-background;
+    text-align: left;
+    padding: 20px 15%;
+
+    .content-container {
+      display: flex;
+      justify-content: space-between;
+
+      .content {
+        flex-direction: column;
+        margin-bottom: 20px;
+
+        .section {
+          flex: 1;
+          margin-top: 20px;
+          margin-bottom: 20px;
+
+          h4 {
+            color: $title-color;
+            margin-bottom: 5px;
+            margin-top: 5px;
+          }
+
+          .graphic-container {
+            margin-top: 20px;
+          }
+
+          p, a {
+            color: $subtitle-color;
+            line-height: 1.6;
+            text-decoration: none;
+          }
+
+          a:hover {
+            color: $title-color;
+          }
+        }
+      }
+    }
+
+    .bottom {
+      //border-top: 1px solid $subtitle-color;
+      padding-top: 10px;
+      text-align: left;
+
+      p {
+        font-size: 0.8em;
+        color: $subtitle-color;
+      }
+    }
+  }
+}
+
+.navbar {
+  position: fixed;
+  width: 70%;
+  background: $form-background;
+  text-align: left;
+  padding: 20px 15%;
+  z-index: 999;
+
+  .content-container {
+    display: flex;
+    justify-content: space-between;
+
+    .content {
+      flex-direction: column;
+
+      .section {
+        flex: 1;
+        margin-top: 20px;
+        margin-bottom: 20px;
+
+        h4 {
+          color: $title-color;
+          margin-bottom: 5px;
+          margin-top: 5px;
+        }
+
+        .graphic-container {
+          margin-top: 20px;
+        }
+
+        p, a {
+          color: $subtitle-color;
+          line-height: 1.6;
+          text-decoration: none;
+        }
+
+        a:hover {
+          color: $title-color;
+        }
+      }
+    }
+  }
+}
+
+.float_form_auth {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    input {
+        width: 75%;
+        float: right;
+    }
+
+    .input_generate {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+
+        .input_labels {
+            width: 20%;
+            font-size: 20px;
+            padding-top: 25px;
+        }
+    }
+
+    button {
+        float: right;
+        position: relative;
+        margin-top: 30px;
+    }
+
+    .form_info {
+        float: float;
+        position: absolute;
+        margin-top: 0px;
+    }
+
+}
+
+.float_form_render_sync {
+    position: fixed;
+    width: 600px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 40%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow-y: scroll;
+
+    button {
+        float: left;
+    }
+}
+
+.float_form_render_async {
+    position: fixed;
+    width: 400px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 50%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow: hidden;
+
+    button {
+        float: left;
+    }
+
+    select {
+        width: 100%;
+        height: 50px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        background-color: rgba(22,28,29,1);
+        color: rgba(0,128,0,1);
+        border: 2px solid;
+        border-radius: 10px;
+    }
+
+}
+
+.float_form_connect {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 15%;
+
+    z-index: 1;
+
+    .progress_bar_form {
+        width: 400px - 4px;
+        height: 25px;
+        padding-top: 6px;
+        border: 2px solid;
+        border-radius: 10px;
+        text-align: center;
+
+
+        .progress_bar_progress {
+            background-color: green;
+        }
+
+    }
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+        color: rgba(22,28,29,1);
+    }
+
+    button {
+        width: 100%;
+        margin-top: 25px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}
+
+.float_form_console {
+    position: fixed;
+    width: 400px;
+    height: 100px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 25%;
+    margin-left: 15%;
+    transition-duration: 0.2s;
+
+    z-index: 0;
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+        color: rgba(22,28,29,1);
+    }
+
+    .console_data {
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+    }
+}
+
+.float_form_model {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    .upload_input {
+        width: 0px !important;
+        height: 0px !important;
+        padding-top: 70px;
+        padding-left: 400px;
+        margin-left: 0px;
+        color: rgba(0,128,0,1);
+        font-family: Ubuntu;
+        border: dashed 2px rgba(0,128,0,1);
+        overflow: hidden;
+    }
+
+    button {
+        margin-left: 0px;
+    }
+}

src/styles/large.cube.scss

@@ -0,0 +1,50 @@
+$cube-size: 400px;
+$cube-color: rgba(0, 140, 0, 0.5);
+$perspective: 10000px;
+$animation-duration: 20s;
+
+@mixin cube-face {
+  position: absolute;
+  width: $cube-size - 15px;
+  height: $cube-size - 15px;
+  background: $cube-color;
+  will-change: transform;
+}
+
+@keyframes rotateCube {
+  0% {
+    transform: rotateX(0) rotateY(0) rotateZ(0);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+.graphic-container {
+  perspective: $perspective;
+  perspective-origin: 50% 100px; // Adjusted for better 3D effect
+  z-index: 1; // Lower z-index than the login form to place it behind
+}
+
+.cube {
+  width: $cube-size;
+  height: $cube-size;
+  position: relative;
+  margin: auto; // Centers the cube within the graphic container
+  transform-style: preserve-3d;
+  transform-origin: center center; // Rotates around the center of the cube
+  animation: rotateCube $animation-duration infinite linear;
+  will-change: transform;
+
+  div {
+    @include cube-face;
+  }
+
+  .front  { transform: translateZ($cube-size / 2); }
+  .back   { transform: translateZ(-$cube-size / 2) rotateY(180deg); }
+  .right  { transform: rotateY(90deg) translateZ($cube-size / 2); }
+  .left   { transform: rotateY(-90deg) translateZ($cube-size / 2); }
+  .top    { transform: rotateX(90deg) translateZ($cube-size / 2); }
+  .bottom { transform: rotateX(-90deg) translateZ($cube-size / 2); }
+
+}

src/styles/small.cube.scss

@@ -0,0 +1,56 @@
+$cube-size: 30px;
+$cube-color: rgba(0, 140, 0, 0.5);
+$perspective: 10000px;
+$animation-duration: 20s;
+
+@mixin cube-face {
+  position: absolute;
+  width: $cube-size - 4px;
+  height: $cube-size - 4px;
+  background: $cube-color;
+}
+
+@keyframes rotateCube {
+  0% {
+    transform: rotateX(0) rotateY(0) rotateZ(0);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+.graphic-container {
+  display: flex;
+  perspective: $perspective;
+  perspective-origin: 50% 100px; // Adjusted for better 3D effect
+  z-index: 1; // Lower z-index than the login form to place it behind
+
+  .cube {
+    width: $cube-size;
+    height: $cube-size;
+    position: relative;
+    margin: auto; // Centers the cube within the graphic container
+    transform-style: preserve-3d;
+    transform-origin: center center; // Rotates around the center of the cube
+    animation: rotateCube $animation-duration infinite linear;
+
+    div {
+      @include cube-face;
+    }
+
+    .face-front  { transform: translateZ($cube-size / 2); }
+    .face-back   { transform: translateZ(-$cube-size / 2) rotateY(180deg); }
+    .face-right  { transform: rotateY(90deg) translateZ($cube-size / 2); }
+    .face-left   { transform: rotateY(-90deg) translateZ($cube-size / 2); }
+    .face-top    { transform: rotateX(90deg) translateZ($cube-size / 2); }
+    .face-bottom { transform: rotateX(-90deg) translateZ($cube-size / 2); }
+
+  }
+
+  .title {
+    color: white;
+    font-size: 30px;
+    font-weight: 600;
+    margin-left: 10px;
+  }
+}