diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx index f668aef..f0a37e8 100644 --- a/frontend/code/src/components/Home/assets/Table.tsx +++ b/frontend/code/src/components/Home/assets/Table.tsx @@ -37,7 +37,7 @@ export const Table = () => {users.map((x: any, index: number) => (
@@ -52,9 +52,9 @@ export const Table = () => Avatar Tailwind CSS Component
-
{x.name.first}
+
{x.name.first}
- 14 +
{index + 123}
))} diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx index 4d3f81e..bd76627 100644 --- a/frontend/code/src/components/Home/index.tsx +++ b/frontend/code/src/components/Home/index.tsx @@ -7,11 +7,11 @@ export const Home : FC = () : JSX.Element =>{ return (
-
- bg hero +
+ bg hero
-
+
diff --git a/frontend/code/src/components/Layout/Assets/Alert.tsx b/frontend/code/src/components/Layout/Assets/Alert.tsx index 58ab2ec..b65c3a3 100644 --- a/frontend/code/src/components/Layout/Assets/Alert.tsx +++ b/frontend/code/src/components/Layout/Assets/Alert.tsx @@ -1,9 +1,12 @@ +import React from "react" export const Alert = () => { return ( - +
+ +
) } diff --git a/frontend/code/src/components/Layout/Assets/Avatar.tsx b/frontend/code/src/components/Layout/Assets/Avatar.tsx index 1839ce5..81d4d1c 100644 --- a/frontend/code/src/components/Layout/Assets/Avatar.tsx +++ b/frontend/code/src/components/Layout/Assets/Avatar.tsx @@ -1,13 +1,15 @@ import avatart from '../images/avatar.jpg' +import { Link } from "react-router-dom"; + export const Avatar = () =>{ return ( -
+
profile
diff --git a/frontend/code/src/components/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx index 4484f46..949d8e1 100644 --- a/frontend/code/src/components/Layout/Assets/Dash.tsx +++ b/frontend/code/src/components/Layout/Assets/Dash.tsx @@ -1,6 +1,6 @@ export const Dash = () => { return ( -
+
diff --git a/frontend/code/src/components/Layout/Assets/Game.tsx b/frontend/code/src/components/Layout/Assets/Game.tsx index e9fd728..aed66d4 100644 --- a/frontend/code/src/components/Layout/Assets/Game.tsx +++ b/frontend/code/src/components/Layout/Assets/Game.tsx @@ -1,6 +1,6 @@ export const Game = () => { return ( -
+
diff --git a/frontend/code/src/components/Layout/Assets/Logo.tsx b/frontend/code/src/components/Layout/Assets/Logo.tsx index ca490cc..cbca252 100644 --- a/frontend/code/src/components/Layout/Assets/Logo.tsx +++ b/frontend/code/src/components/Layout/Assets/Logo.tsx @@ -1,18 +1,19 @@ export const Logo = () => { return ( - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + +
) } \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Message.tsx b/frontend/code/src/components/Layout/Assets/Message.tsx index 5faa87e..708bef1 100644 --- a/frontend/code/src/components/Layout/Assets/Message.tsx +++ b/frontend/code/src/components/Layout/Assets/Message.tsx @@ -1,7 +1,7 @@ export const Message = () => { return ( -
- +
+ diff --git a/frontend/code/src/components/Layout/Assets/Out.tsx b/frontend/code/src/components/Layout/Assets/Out.tsx index 28789d4..13fd3eb 100644 --- a/frontend/code/src/components/Layout/Assets/Out.tsx +++ b/frontend/code/src/components/Layout/Assets/Out.tsx @@ -1,7 +1,7 @@ export const Out = () => { return ( -
+
diff --git a/frontend/code/src/components/Layout/Assets/Profile.tsx b/frontend/code/src/components/Layout/Assets/Profile.tsx index bfdb2fb..b4ca98c 100644 --- a/frontend/code/src/components/Layout/Assets/Profile.tsx +++ b/frontend/code/src/components/Layout/Assets/Profile.tsx @@ -1,7 +1,7 @@ export const Profile = () => { return ( -
+
diff --git a/frontend/code/src/components/Layout/Assets/Settings.tsx b/frontend/code/src/components/Layout/Assets/Settings.tsx index 1ea1ae0..26c5b72 100644 --- a/frontend/code/src/components/Layout/Assets/Settings.tsx +++ b/frontend/code/src/components/Layout/Assets/Settings.tsx @@ -1,6 +1,6 @@ export const Settings = () => { return ( -
+
diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx index 65f4450..c9df39c 100644 --- a/frontend/code/src/components/Layout/index.tsx +++ b/frontend/code/src/components/Layout/index.tsx @@ -62,7 +62,7 @@ tart ">
-
+
{Content.children}
diff --git a/frontend/code/src/components/Profile/assets/File.tsx b/frontend/code/src/components/Profile/assets/File.tsx new file mode 100644 index 0000000..42638eb --- /dev/null +++ b/frontend/code/src/components/Profile/assets/File.tsx @@ -0,0 +1,11 @@ +export const File = () => { + return ( + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/Hero.gif b/frontend/code/src/components/Profile/assets/Hero.gif new file mode 100644 index 0000000..4b304e6 Binary files /dev/null and b/frontend/code/src/components/Profile/assets/Hero.gif differ diff --git a/frontend/code/src/components/Profile/assets/Master.tsx b/frontend/code/src/components/Profile/assets/Master.tsx new file mode 100644 index 0000000..abaf9e4 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/Master.tsx @@ -0,0 +1,494 @@ +export const Master = () => { + const styleMask:React.CSSProperties = { + maskType: 'luminance', + }; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/MessageB.tsx b/frontend/code/src/components/Profile/assets/MessageB.tsx new file mode 100644 index 0000000..6d52098 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/MessageB.tsx @@ -0,0 +1,14 @@ +export const Message = () => { + return ( + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/Newbie.tsx b/frontend/code/src/components/Profile/assets/Newbie.tsx new file mode 100644 index 0000000..31a5316 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/Newbie.tsx @@ -0,0 +1,214 @@ +export const Newbie = () => { + const styleMask:React.CSSProperties = { + maskType: 'luminance', + }; + const styleAlpha:React.CSSProperties = { + maskType: 'alpha', + }; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/Pong.tsx b/frontend/code/src/components/Profile/assets/Pong.tsx new file mode 100644 index 0000000..4a6fe61 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/Pong.tsx @@ -0,0 +1,13 @@ +import './css/style.css' + +export const Pong = () => { + return ( + + + + + + + + ) +} diff --git a/frontend/code/src/components/Profile/assets/ShareB.tsx b/frontend/code/src/components/Profile/assets/ShareB.tsx new file mode 100644 index 0000000..8c02764 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/ShareB.tsx @@ -0,0 +1,12 @@ +export const Share = () => { + return ( + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/Ultimate.tsx b/frontend/code/src/components/Profile/assets/Ultimate.tsx new file mode 100644 index 0000000..bf25192 --- /dev/null +++ b/frontend/code/src/components/Profile/assets/Ultimate.tsx @@ -0,0 +1,716 @@ +export const Ultimate = () => { + const styleSvg:React.CSSProperties = { + mixBlendMode: 'hard-light', + }; + const styleMask:React.CSSProperties = { + maskType: 'luminance', + }; + const styleAlpha:React.CSSProperties = { + maskType: 'alpha', + }; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Profile/assets/css/style.css b/frontend/code/src/components/Profile/assets/css/style.css new file mode 100644 index 0000000..d474d7d --- /dev/null +++ b/frontend/code/src/components/Profile/assets/css/style.css @@ -0,0 +1,21 @@ + + +@keyframes colorChange { + 0%, 100% { + fill:rgb(241, 218, 247); + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + fill:rgb(202, 127, 143); + + transform: translateY(0); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + +} +.myanimation { + + animation: colorChange 1s infinite; +} diff --git a/frontend/code/src/components/Profile/index.tsx b/frontend/code/src/components/Profile/index.tsx new file mode 100644 index 0000000..02081d1 --- /dev/null +++ b/frontend/code/src/components/Profile/index.tsx @@ -0,0 +1,46 @@ +import { Layout } from '../Layout/' +import { Pong } from './assets/Pong' +import { File } from './assets/File' +import { Share } from './assets/ShareB' +import { Message } from './assets/MessageB' +import { Newbie } from './assets/Newbie' +import { Master } from './assets/Master' +import { Ultimate } from './assets/Ultimate' +import Hero from './assets/Hero.gif' +export const Profile = () =>{ + return ( + +
+ <> + bg hero + +
+
+ profile avatar +
+
+ {/*
*/} + + +
+
+
Mark Zzzz
+
+ + bio bla bla bla +
+
+
+ + +
+
+ + + +
+
+
+ + ) +} \ No newline at end of file diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx index 4e0a243..774f46c 100644 --- a/frontend/code/src/index.tsx +++ b/frontend/code/src/index.tsx @@ -5,6 +5,7 @@ import {Login} from './components/Login' import {Main} from './components/Login/main' import {Lobby} from './components/Lobby/index' import {Error} from './components/404/index' +import {Profile} from './components/Profile' import reportWebVitals from './reportWebVitals'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Home } from './components/Home'; @@ -20,6 +21,7 @@ root.render( }> }> }> + }> }> diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js index adf442c..07036f3 100644 --- a/frontend/code/tailwind.config.js +++ b/frontend/code/tailwind.config.js @@ -38,7 +38,7 @@ module.exports = { "accent": "#1A1C26", - "neutral": "#161922", + "neutral": "#FFFFFF", "info": "#3e9cea",