yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2025-12-09 20:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Coding info page & other

Browse Source 
Coding info page, login menu & other fixes
This commit is contained in:
RailTH
2024-04-18 13:55:39 +11:00
parent 77d1ca33cc
commit 16273e9653
10 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
reactapp/src/HomeStyle.scss
View File

@@ -2,7 +2,7 @@ $background-color: #252422;
$main-color: #CCC5B9;
$accent-color: #EB5E28;
.home-section {
.home-page {
width: 96%;
min-height: 100%;
display: flex;

74
reactapp/src/InfoPageStyle.scss Normal file
View File

@@ -0,0 +1,74 @@
$background-color: #252422;
$main-color: #CCC5B9;
$accent-color: #EB5E28;
.info-page {
width: 96%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.info-page__dev-card {
width: 300px;
height: 400px;
perspective: 1000px;
border-radius: 15px;
.dev-card__inner {
position: relative;
border-radius: 15px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
.dev-card__front, .dev-card__back {
position: absolute;
border-radius: 15px;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.dev-card__front {
.dev-card__avatar {
width: 100%;
height: 100%;
border-radius: 15px;
}
}
.dev-card__back {
background-color: $background-color;
color: white;
box-sizing: border-box;
padding: 20px;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: space-between;
.dev-card__name {
font-size: 24px;
}
.dev-card__info {
color: $main-color;
}
.dev-card__url {
font-size: 18px;
color: white;
text-decoration: underline;
}
}
}
}
.info-page__dev-card:hover .dev-card__inner {
transform: rotateY(180deg);
}
}

BIN
reactapp/src/assets/img/info-page__no-kesspen-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
reactapp/src/assets/img/info-page__railth-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

27
reactapp/src/components/DevCard.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
interface DeveloperCardProps {
avatar: string;
name: string;
info: string;
url: string;
}
export default function DevCard({ avatar, name, info, url }: DeveloperCardProps) {
return (
<div className="info-page__dev-card">
<div className="dev-card__inner">
<div className="dev-card__front">
<img src={avatar} alt={name} className="dev-card__avatar" />
</div>
<div className="dev-card__back">
<div>
<h3 className='dev-card__name'>{name}</h3>
<p className='dev-card__info'>{info}</p>
</div>
<a className='dev-card__url' href={url} target='_blank' rel="noreferrer">GitHub</a>
</div>
</div>
</div>
);
}

2
reactapp/src/components/Header.tsx
View File

@@ -138,7 +138,7 @@ export default function Header({ togglePopupMap, onSelectCategory, onSearchChang
{/* Код для svg */}
</motion.button>
<motion.a
href="/"
href="info"
className="header__info-a"
whileTap={{scale: 0.9}}
transition={{duration: 0.2, type: "spring"}}

17
reactapp/src/components/LoginMenu.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { motion } from "framer-motion";
interface LoginMenuProps {
@@ -6,6 +6,12 @@ interface LoginMenuProps {
}
export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Element {
const [isLoginMode, setIsLoginMode] = useState(true);
const toggleMode = () => {
setIsLoginMode(!isLoginMode);
}
return(
<>
<div className="background-blackout" onClick={toggleLoginMenu}></div>
@@ -16,7 +22,7 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
SusMarket <span>ID</span>
</h5>
<p className="top-container__text">
Войдите с SusMarket ID
{isLoginMode ? 'Войдите с SusMarket ID' : 'Зарегистрируйтесь с SusMarket ID'}
</p>
</div>
</div>
@@ -25,15 +31,16 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
<input type="password" name="userPassword" id="userPassword" className="popup-login__password-input" placeholder="Пароль"/>
</div>
<div className="popup-login__bottom-container">
<p className="popup-menu__prompt-url">
У вас нет аккаунта? <u>Зарегестрироваться</u>
<p className="popup-login__prompt-url" onClick={toggleMode}>
{isLoginMode ? 'У вас нет аккаунта? ' : 'У вас есть аккаунт? '}
<u>{isLoginMode ? 'Зарегистрироваться' : 'Войти'}</u>
</p>
<motion.button
className="popup-login__login-button"
whileTap={{scale: 0.98}}
transition={{duration: 0.2, type: "spring"}}
>
Войти
{isLoginMode ? 'Войти' : 'Зарегистрироваться'}
</motion.button>
</div>
</form>

6
reactapp/src/index.scss
View File

@@ -515,13 +515,17 @@ body {
flex-direction: column;
gap: 20px;
.popup-menu__prompt-url {
.popup-login__prompt-url {
color: $main-color;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
u {
cursor: pointer;
}
}
.popup-login__login-button {

2
reactapp/src/pages/HomePage.tsx
View File

@@ -11,7 +11,7 @@ interface HomePageProps {
export default function HomePage({ products, selectedCategory }: HomePageProps) {
return(
<section className="home-section">
<section className="home-page">
<Banner />
<div className="products-div">
{products.map(product => (

21
reactapp/src/pages/InfoPage.tsx
View File

@@ -1,7 +1,24 @@
import React from "react";
import DevCard from "../components/DevCard";
import "../InfoPageStyle.scss";
import RailTHAvatar from "../assets/img/info-page__railth-avatar.png"
import NoKesspenAvatar from "../assets/img/info-page__no-kesspen-avatar.png"
export default function InfoPage() {
return(
<>
</>
<section className="info-page">
<DevCard
avatar={NoKesspenAvatar}
name="No_Kesspen"
info="Backend разработчик"
url="https://github.com/KessPenGames"
/>
<DevCard
avatar={RailTHAvatar}
name="Rail_TH"
info="Frontend разработчик"
url="https://github.com/Rail-TH"
/>
</section>
)
}