7 | Time
{this.props.time} 8 |
9 | )
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/game/Puzzle/components/Moves.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Moves extends Component {
4 | render() {
5 | return (
6 | {this.props.time} 8 |
7 | Moves
{this.props.moves} 8 |
9 | )
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/store/hooks.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
2 | // @ts-ignore
3 | import type { RootState, AppDispatch } from "./index.tsx";
4 |
5 | export const useAppDispatch: () => AppDispatch = useDispatch;
6 | export const useAppSelector: TypedUseSelectorHook{this.props.moves} 8 |
7 | New
Game 8 |
9 | )
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/game/TicTacToe/Game/Game.css:
--------------------------------------------------------------------------------
1 | .GameTic{
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | text-align: center;
7 | position: relative;
8 |
9 | }
10 | @media only screen and (max-width: 700px) {
11 | .GameTic{
12 | transform: translate(0%, 25%);
13 | }
14 | }
--------------------------------------------------------------------------------
/src/game/TicTacToe/Square/Square.jsx:
--------------------------------------------------------------------------------
1 | import "./Square.css";
2 |
3 | function Square({ id, value, handleClick, board }) {
4 | return (
5 | Game 8 |
handleClick(id)} className="square">
6 |
12 | );
13 | }
14 |
15 | export default Square;
16 |
--------------------------------------------------------------------------------
/src/assets/arrow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 | theme: {
5 | extend: {
6 | colors: {
7 | slate: {
8 | 800: "#141E33",
9 | },
10 | },
11 | screens: {
12 | "2xl": "1736px",
13 | },
14 | },
15 | },
16 | plugins: [require("@tailwindcss/line-clamp")],
17 | darkMode: "class",
18 | };
19 |
--------------------------------------------------------------------------------
/src/assets/bell.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/edit.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/view-1.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/game/TicTacToe/Scores/Scores.css:
--------------------------------------------------------------------------------
1 | .scores {
2 | display: flex;
3 | flex-direction: row;
4 | color: black;
5 | font-size: 26px;
6 | justify-content: center;
7 | margin-top: 26px;
8 | font-weight: 100;
9 | }
10 | .scores div {
11 | width: 150px;
12 | text-align: center;
13 | line-height: 35px;
14 | }
15 |
16 | @media (max-width: 700px) {
17 | .scores {
18 | font-size: 22px;
19 | }
20 | .scores div {
21 | width: 100px;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/assets/options.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/game/TicTacToe/Game/Game.jsx:
--------------------------------------------------------------------------------
1 | import "./Game.css";
2 | import { useState } from "react";
3 | import Board from "../Board/Board";
4 | import Scores from "../Scores/Scores";
5 |
6 | function GameTicTac() {
7 |
8 | const [scores, setScores] = useState({
9 | x: 0,
10 | o: 0,
11 | tie: 0,
12 | });
13 |
14 | return (
15 | 9 | {value} 10 |
11 |
16 |
17 |
18 |
19 | );
20 | }
21 |
22 | export default GameTicTac;
23 |
--------------------------------------------------------------------------------
/src/components/Routes/Home.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import LayoutRoutes from "../Utilities/LayoutRoutes";
3 | import { useAppSelector } from "../../store/hooks";
4 | import useDescriptionTitle from "../hooks/useDescriptionTitle";
5 |
6 | const Home: React.FC = () => {
7 | const tasks = useAppSelector((state) => state.tasks.tasks);
8 |
9 | useDescriptionTitle("Organize your tasks", "All tasks");
10 | return
6 |
22 | );
23 | }
24 |
25 | export default Scores;
26 |
--------------------------------------------------------------------------------
/src/game/Puzzle/components/Win.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Win extends Component {
4 | winStyle = () => {
5 | return { display: this.props.win ? 'block' : 'none'}
6 | }
7 | render() {
8 | return (
9 |
7 | Player
8 |
9 | {scores.x} 10 |
11 | 9 | {scores.x} 10 |
12 | Tie
13 |
14 | {scores.tie} 15 |
16 | 14 | {scores.tie} 15 |
17 | Computer
18 |
19 | {scores.o} 20 |
21 | 19 | {scores.o} 20 |
10 |
16 | )
17 | }
18 | }
--------------------------------------------------------------------------------
/src/store/index.tsx:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import tasksReducer, { tasksMiddleware } from "./Tasks.store";
3 | import modalReducer from "./Modal.store";
4 | import menuReducer from "./Menu.store";
5 |
6 | const store = configureStore({
7 | reducer: { tasks: tasksReducer, modal: modalReducer, menu: menuReducer },
8 | middleware: (getDefaultMiddleware: any) =>
9 | getDefaultMiddleware().concat(tasksMiddleware),
10 | });
11 |
12 | export type RootState = ReturnType
11 | You won!
12 | Time: {this.props.time}
13 | Moves: {this.props.moves} 14 |
15 | 12 | Time: {this.props.time}
13 | Moves: {this.props.moves} 14 |
7 |
12 | )
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/hooks/useBackDrop.tsx:
--------------------------------------------------------------------------------
1 | import MobileAccountData from "../AccountSection/MobileAccountData";
2 | import {ReactComponent as X} from "../../assets/x.svg";
3 | export function BackDrop({ BackState, BackSet }:{BackState:boolean,BackSet:any}){
4 | return (
5 | <>
6 | this.props.onClick(3)}>3x3
8 | this.props.onClick(4)}>4x4
9 | this.props.onClick(5)}>5x5
10 | this.props.onClick(6)}>6x6
11 |
7 | {
8 | BackState = false
9 | BackSet(false)
10 | }}/>
11 |
12 |
13 |
14 | )
15 |
16 | }
--------------------------------------------------------------------------------
/src/components/hooks/useCompletedTasks.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Task } from "../../interfaces";
3 |
4 | interface Props {
5 | tasks: Task[];
6 | done: boolean;
7 | }
8 |
9 | const useCompletedTasks = (props: Props): { tasks: Task[] } => {
10 | const [tasks, setTasks] = useState
11 |
12 |
14 |
15 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/assets/date.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/Routes/DoneTasks.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppSelector } from "../../store/hooks";
3 | import useCompletedTasks from "../hooks/useCompletedTasks";
4 | import useDescriptionTitle from "../hooks/useDescriptionTitle";
5 | import LayoutRoutes from "../Utilities/LayoutRoutes";
6 |
7 | const DoneTasks: React.FC<{ done: boolean; title: string }> = ({
8 | done,
9 | title,
10 | }) => {
11 | const tasks = useAppSelector((state) => state.tasks.tasks);
12 |
13 | const { tasks: tasksFiltered } = useCompletedTasks({ tasks, done });
14 |
15 | useDescriptionTitle("All tasks done", title);
16 |
17 | return Can't Use This
16 |{text}
16 |
17 |
18 |
21 |
22 |
19 | {children}
20 |
21 | {menuOpen && !mediaQueries.xl && (
22 |
26 | )}
27 |
28 | );
29 | };
30 |
31 | export default LayoutMenus;
32 |
--------------------------------------------------------------------------------
/src/components/hooks/useTodayTasks.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { Task } from "../../interfaces";
3 | import { useAppSelector } from "../../store/hooks";
4 |
5 | const useTodayTasks = (): Task[] => {
6 | const tasks = useAppSelector((state) => state.tasks.tasks);
7 | const [todaysTasks, setTodaysTasks] = useState
19 |
28 |
29 | );
30 | };
31 |
32 | export default ActionsTaskItem;
33 |
--------------------------------------------------------------------------------
/src/components/AccountSection/DeleteTasks.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch } from "../../store/hooks";
3 | import { tasksActions } from "../../store/Tasks.store";
4 | import ModalConfirm from "../Utilities/ModalConfirm";
5 | import { ReactComponent as Trash } from "../../assets/trash.svg";
6 |
7 |
8 | const DeleteTasks: React.FC = () => {
9 | const dispatch = useAppDispatch();
10 |
11 | const [showModal, setIsModalShown] = useState
14 |
27 |
31 | );
32 | };
33 |
34 | export default Directories;
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright © 2023 WebVaVe . All rights reserved | Developed and supported by the Ariyan Emami | WebVaVe
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/assets/2048.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/Weather/AlertBlock.tsx:
--------------------------------------------------------------------------------
1 |
2 | import React, { useState} from "react";
3 | import Button from './button/Button';
4 | import Modal, { ModalBody, ModalFooter, ModalHeader } from './modal/Modal';
5 | export function AlertBlock() {
6 | const [show, setShow] = useState(true)
7 |
8 | return(
9 |
28 |
30 |
10 |
14 |
15 |
17 |
18 |
23 |
24 |
27 |
28 |
29 |
30 | )
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/TasksSection/TaskItem/BtnDeleteTask.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch } from "../../../store/hooks";
3 | import { tasksActions } from "../../../store/Tasks.store";
4 | import ModalConfirm from "../../Utilities/ModalConfirm";
5 | import { ReactComponent as Trash } from "../../../assets/trash.svg";
6 |
7 | const BtnDeleteTask: React.FC<{ taskId: string }> = ({ taskId }) => {
8 | const [showModal, setIsModalShown] = useStateAlert Weather
16 |
19 | As a result of the sanctions imposed on your country, certain capabilities are now
20 | inaccessible for use.
or maybe the API has expired
21 |
14 |
35 | );
36 | };
37 |
38 | export default InfosTask;
39 |
--------------------------------------------------------------------------------
/src/components/hooks/useVisibility.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useVisibility = (elements: HTMLElement[], fnClose?: () => void) => {
4 | const [elementIsVisible, setElementIsVisible] = useState
19 |
20 | {task.title}
21 |
22 |
23 | 29 | {task.description} 30 |
31 | 34 |
27 |
28 |
41 | );
42 | };
43 |
44 | export default App;
45 |
--------------------------------------------------------------------------------
/src/Weather/modal/Modal.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import './modal.scss';
3 |
4 | const Modal = props => {
5 | const modalRef = useRef();
6 |
7 | useEffect(() => {
8 | const clickOutsideContent = (e) => {
9 | if (e.target === modalRef.current) {
10 | props.setShow(false);
11 | }
12 | };
13 | window.addEventListener('click', clickOutsideContent);
14 | return () => {
15 | window.removeEventListener('click', clickOutsideContent);
16 | };
17 | }, [props]);
18 |
19 | return
29 |
30 | {modal.modalCreateTaskOpen && (
31 |
40 |
20 |
;
29 | };
30 |
31 | export default Modal;
32 |
33 | export const ModalHeader = props => {
34 | return
21 | {
22 | !props.hideCloseButton && props.setShow(false)} className="modal__close">
23 | ×
24 |
25 | }
26 | {props.children}
27 |
28 |
35 | {props.children}
36 |
37 | }
38 |
39 | export const ModalBody = props => {
40 | return
41 | {props.children}
42 |
43 | }
44 |
45 | export const ModalFooter = props => {
46 | return
47 | {props.children}
48 |
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/Menu/Menu.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch, useAppSelector } from "../../store/hooks";
3 | import { menusActions } from "../../store/Menu.store";
4 | import BtnAddTask from "../Utilities/BtnAddTask";
5 | import Directories from "./Directories/Directories";
6 | import NavLinks from "./NavLinks";
7 | import LayoutMenus from "../Utilities/LayoutMenus";
8 | import Footer from "../Footer";
9 |
10 |
11 | const classLinkActive =
12 | "text-rose-600 bg-violet-100 border-r-4 border-rose-500 dark:bg-slate-700/[.2] dark:text-slate-200 dark:border-slate-200";
13 |
14 | const Menu: React.FC = () => {
15 | const menuOpen = useAppSelector((state) => state.menu.menuHeaderOpened);
16 | const dispatch = useAppDispatch();
17 |
18 | const closeMenuHandler = () => {
19 | dispatch(menusActions.closeMenuHeader());
20 | };
21 | return (
22 | 29 | ToDo 30 |
31 |
31 | {val?val:''}
32 |
33 | );
34 | }))
35 | }
36 | render() {
37 | return (
38 |
39 | {this.generateTiles()}
40 |
41 | )
42 | }
43 | }
--------------------------------------------------------------------------------
/src/components/TasksSection/TasksSection.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Navigate, Route, Routes } from "react-router-dom";
3 | import Directory from "../Routes/Directory";
4 | import DoneTasks from "../Routes/DoneTasks";
5 | import Home from "../Routes/Home";
6 | import ImportantTasks from "../Routes/ImportantTasks";
7 | import SearchResults from "../Routes/SearchResults";
8 | import TaskOnly from "../Routes/TaskOnly";
9 | import TodaysTasks from "../Routes/TodaysTasks";
10 | import HeaderTasks from "./HeaderTasks";
11 | import Footer from "../Footer";
12 |
13 |
14 | const TasksSection: React.FC = () => {
15 | return (
16 |
21 |
22 |
29 |
32 |
33 | );
34 | };
35 |
36 | const modalElement = document.getElementById("modal")! as HTMLElement;
37 |
38 | const Modal: React.FC<{
39 | children: React.ReactNode;
40 | onClose: () => void;
41 | title: string;
42 | }> = ({ children, onClose, title }) => {
43 | return ReactDOM.createPortal(
44 | {title}
30 | {children} 31 |
21 |
24 |
27 |
45 |
46 | );
47 | };
48 |
49 | export default ButtonsSort;
50 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
30 | {todaysTasks.length !== 0 && (
31 |
52 |
53 | );
54 | };
55 |
56 | export default React.memo(TasksDone);
57 |
--------------------------------------------------------------------------------
/src/components/Menu/Directories/ContentDirectories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch, useAppSelector } from "../../../store/hooks";
3 | import { tasksActions } from "../../../store/Tasks.store";
4 | import ModalDirectory from "../../Utilities/ModalDirectory";
5 | import ItemDirectory from "./ItemDirectory";
6 |
7 | const ContentDirectories: React.FC<{ classActive: string }> = ({
8 | classActive,
9 | }) => {
10 | const directories = useAppSelector((store) => store.tasks.directories);
11 | const [modalDirIsShown, setModalDirIsShown] = useState
32 |
33 | Tasks today {todayTasksDone.length}/
34 | {todaysTasks.length}
35 |
36 |
40 | )}
41 | {tasks.length !== 0 && (
42 |
37 |
38 |
39 |
43 |
44 | All tasks {allTasksDone.length}/{tasks.length}
45 |
46 |
50 | )}
51 |
47 |
48 |
49 | -
45 | {directories.map((dir: string) => (
46 |
3 | Ariyan ToDo
4 | 👆👆👆 5 | # ToDo 6 | To-do list website made with React JS, Tailwind CSS, TypeScript and more. 7 |  8 | 9 |  10 | 11 |  12 | 13 | Light mode: 14 |  15 | 16 | 17 | 18 | ## Features 19 | - Responsive design for optimal usage on various devices. 20 | - Filter tasks by status (all, active, completed). 21 | - Applied to organize your tasks with the following data: title, description, date, mark as complete and mark as important. 22 | - Tasks are organized into routes: today's tasks, important tasks, incomplete, complete, all tasks and tasks by directory (folder). Directories and tasks can be edited or deleted. In addition, there is a main directory called "Main" which cannot be edited or deleted. 23 | - The list of tasks can be displayed first in: nearest, farthest, complete or incomplete. 24 | - You can search for any tasks in the search field. 25 | - Today's tasks are shown in the user section and in notifications. 26 | - Tasks, directories and DarkMode data are saved to localStorage. 27 | 28 | ## Goal 29 | The project mainly aimed to put into practice knowledge of TypeScript, Tailwind, UseApi and React Js. 30 | 31 | ## Tools used 32 | - React JS 33 | - TypeScript 34 | - Tailwind CSS 35 | - React Router DOM 36 | - HTML 37 | - Api 38 | - Weather 39 | - Game 40 | - Figma 41 | 42 | 43 | 44 | ## How to Run 45 | 46 | if Need run on your machine: 47 | 48 | Clone project 49 | ``` 50 | git clone https://github.com/ariyan-emi/ToDo.git 51 | ``` 52 | go to project 53 | ``` 54 | cd ToDo-main 55 | ``` 56 | install npm 57 | ``` 58 | npm install 59 | ``` 60 | start project 61 | ``` 62 | npm start 63 | ``` 64 | ## Contributing 65 | Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.😊 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/game/Puzzle/App.css: -------------------------------------------------------------------------------- 1 | .bodyPuzzle { 2 | text-align: center; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | font-size: calc(10px + 2vmin); 8 | color: white; 9 | user-select: none; 10 | position: relative; 11 | transform: translate(0%, 25%); 12 | } 13 | @media only screen and (max-width: 700px) { 14 | .bodyPuzzle{ 15 | transform: translate(0%, 20%); 16 | } 17 | } 18 | 19 | .Menu { 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-evenly; 23 | margin-bottom: 20px; 24 | } 25 | 26 | .Menu > div { 27 | margin: 3px; 28 | padding-bottom: 3px; 29 | background-color: #EAB308; 30 | border-radius: 5px; 31 | font-size: calc(5px + 2vmin); 32 | } 33 | 34 | .Time, .Moves { 35 | flex-grow: 1; 36 | } 37 | 38 | .NewGameButton { 39 | flex-grow: 2; 40 | cursor: pointer; 41 | 42 | } 43 | 44 | .Game { 45 | display:flex; 46 | flex-wrap: wrap; 47 | justify-content: space-evenly; 48 | background-color: #6D28D9; 49 | border-radius:10px ; 50 | padding: 10px; 51 | max-width: 400px; 52 | } 53 | 54 | .tile { 55 | /*flex-basis: 24%; 56 | padding-top:6.5%; 57 | padding-bottom:18%; 58 | font-size: calc(14px + 2vmin); 59 | font-weight: bold;*/ 60 | flex-grow: 1; 61 | border-radius: 10px; 62 | margin: 1px; 63 | height: 0; 64 | cursor: pointer; 65 | } 66 | 67 | #tile0 { 68 | cursor: default; 69 | } 70 | 71 | .winBox { 72 | position: absolute; 73 | top:45%; 74 | left:50%; 75 | min-width: 20%; 76 | } 77 | 78 | .win { 79 | background-color: #c3c7d1; 80 | border-radius: 10px; 81 | color: #EAB308; 82 | font-size: calc(5px + 2vmin); 83 | padding: 10px 30px; 84 | position: relative; 85 | left: -50%; 86 | } 87 | 88 | .ChangeSizeBox { 89 | display: flex; 90 | justify-content: space-evenly; 91 | margin-top: 15px; 92 | } 93 | 94 | .ChangeSizeItem { 95 | background-color: #EAB308; 96 | padding: 5px; 97 | flex-basis: 20%; 98 | border-radius: 10px; 99 | padding-bottom: 3px; 100 | cursor: pointer; 101 | } -------------------------------------------------------------------------------- /src/components/hooks/useSortTasks.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Task } from "../../interfaces"; 3 | 4 | const useSortTasks = (tasks: Task[]) => { 5 | const [sortedBy, setSortedBy] = useState
32 | {tasksTitle} 33 |
34 |-
47 | {sortedTasks.map((task) => (
48 |
- 51 | 63 | 64 |
31 |
39 | {notificationIsVisible && (
40 |
73 | );
74 | };
75 |
76 | export default React.memo(Notification);
77 |
--------------------------------------------------------------------------------
/src/assets/tic-tac-toe.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/components/Menu/Directories/ItemDirectory.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { NavLink, useLocation } from "react-router-dom";
3 | import { useAppDispatch } from "../../../store/hooks";
4 | import { tasksActions } from "../../../store/Tasks.store";
5 | import { ReactComponent as Trash } from "../../../assets/trash.svg";
6 | import { ReactComponent as Edit } from "../../../assets/edit.svg";
7 | import ModalConfirm from "../../Utilities/ModalConfirm";
8 | import ModalDirectory from "../../Utilities/ModalDirectory";
9 |
10 | const ItemDirectory: React.FC<{ dir: string; classActive: string }> = ({
11 | dir,
12 | classActive,
13 | }) => {
14 | const route = useLocation();
15 | const currentPath = route.pathname;
16 |
17 | const dispatch = useAppDispatch();
18 |
19 | const [modalIsShown, setModalIsShown] = useState
41 | {uncompletedTasks.length > 0 ? (
42 |
71 | )}
72 |
43 |
44 | You have {uncompletedTasks.length} uncompleted tasks today:
45 |
46 |
67 | ) : (
68 | -
47 | {tasksToShow.map((task) => (
48 |
- 49 | 53 | {task.title} 54 | 55 | 56 | ))} 57 |
Nothing to show here.
69 | )} 70 |
72 |
78 |
84 |
85 | )}
86 |
59 |
94 |
95 | );
96 | };
97 |
98 | export default SearchField;
99 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../index.css"
3 | import LinkedInIcon from '@mui/icons-material/LinkedIn';
4 | import GitHubIcon from '@mui/icons-material/GitHub';
5 | import InstagramIcon from '@mui/icons-material/Instagram';
6 | import TelegramIcon from '@mui/icons-material/Telegram';
7 | import EmailIcon from '@mui/icons-material/Email';
8 | import LanguageIcon from '@mui/icons-material/Language';
9 | import Button from '@mui/material/Button';
10 | import Dialog from '@mui/material/Dialog';
11 | import DialogActions from '@mui/material/DialogActions';
12 | import DialogContent from '@mui/material/DialogContent';
13 | import {ReactComponent as Social} from "../assets/Social.svg";
14 | import DialogTitle from '@mui/material/DialogTitle';
15 | import {TransitionProps} from "@mui/material/transitions";
16 | import {Slide} from "@mui/material";
17 |
18 | const Transition = React.forwardRef(function Transition(
19 | props: TransitionProps & {
20 | children: React.ReactElement
41 |
47 |
81 |
82 |
83 | );
84 | };
85 |
86 | export default Footer;
87 |
--------------------------------------------------------------------------------
/src/components/TasksSection/HeaderTasks.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from "react";
2 | import BtnAddTask from "../Utilities/BtnAddTask";
3 | import {ReactComponent as MenuIcon} from "../../assets/menu.svg";
4 | import { ReactComponent as IconGame } from "../../assets/gameboy.svg";
5 | import AppsIcon from '@mui/icons-material/Apps';
6 | import SearchField from "./SearchField";
7 | import {useAppDispatch} from "../../store/hooks";
8 | import {menusActions} from "../../store/Menu.store";
9 | import Notification from "./Notification";
10 | import DarkMode from "../AccountSection/DarkMode";
11 | import TasksDone from "../AccountSection/TasksDone";
12 | import DeleteTasks from "../AccountSection/DeleteTasks";
13 | import {If} from "../Service/condition";
14 | import {BackDrop} from "../hooks/useBackDrop";
15 |
16 | const HeaderTasks: React.FC = () => {
17 | const dispatch = useAppDispatch();
18 | let [BackState, BackSet] = useState(false);
19 |
20 | const date: Date = new Date();
21 | const year: number = date.getFullYear();
22 | const month: number = date.getMonth();
23 | const day: number = date.getDate();
24 |
25 | const monthName: string[] = [
26 | "January",
27 | "February",
28 | "March",
29 | "April",
30 | "May",
31 | "June",
32 | "July",
33 | "August",
34 | "September",
35 | "October",
36 | "November",
37 | "December",
38 | ];
39 |
40 | const todayDate = `${year}, ${monthName[month].slice(0, 3)} ${day
41 | .toString()
42 | .padStart(2, "0")}`;
43 |
44 | const dateTimeFormat = `${year}-${month.toString().padStart(2, "0")}-${day
45 | .toString()
46 | .padStart(2, "0")}}`;
47 |
48 | const openMenuHeaderHandler = () => {
49 | dispatch(menusActions.openMenuHeader());
50 | };
51 | const openMenuAccountHandler = () => {
52 | dispatch(menusActions.openMenuAccount());
53 | };
54 |
55 | return (
56 |
66 |
67 | TODO
68 |
69 |
71 |
72 |
91 |
92 |
93 |
94 |
95 |
51 |
61 |
52 |
57 | Today
53 |54 | {moment(state.Time).format("h:mm a")} 55 |
56 |58 | {moment(state.Time).format("MMM Do YY")} 59 |
60 |
62 |
63 | {state.temp}°C
64 |
65 | 
71 |
72 |
73 |
78 |
74 |
79 |
83 |
80 |
84 |
88 |
85 |
89 |
93 |
90 |
48 |
49 |
53 |
54 |
58 |
59 |
84 |
85 |
99 |
100 |
101 | );
102 | };
103 |
--------------------------------------------------------------------------------
/src/components/AccountSection/AccountData.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from "react";
2 | import {useAppDispatch, useAppSelector} from "../../store/hooks";
3 | import {menusActions} from "../../store/Menu.store";
4 | import LayoutMenus from "../Utilities/LayoutMenus";
5 | import {GameHooks} from "./HookState";
6 | import dayjs from 'dayjs';
7 | import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
8 | import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
9 | import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
10 | import {ReactComponent as Close} from "../../assets/x.svg";
11 | import {ReactComponent as GameBar} from "../../assets/gameboy.svg";
12 | import {ReactComponent as TicTac} from "../../assets/tic-tac-toe.svg";
13 | import {ReactComponent as GameIcon2048} from "../../assets/2048.svg";
14 | import Weather from "../../Weather/WeatherApp";
15 | import GameTicTac from "../../game/TicTacToe/Game/Game";
16 | import {ElseIf, If} from "../Service/condition";
17 | import GamePuzzle from "../../game/Puzzle/App";
18 |
19 |
20 | const AccountData: React.FC = () => {
21 |
22 | const menuOpen = useAppSelector((state) => state.menu.menuAccountOpened);
23 |
24 | const dispatch = useAppDispatch();
25 |
26 | const [GameState, GameSet] = useState({game: "none", parentDiv: "DontShow"})
27 | GameHooks.GameState = GameState
28 | GameHooks.GameSet = GameSet
29 |
30 | const closeMenuHandler = () => {
31 | dispatch(menusActions.closeMenuAccount());
32 | };
33 | setTimeout(() => {
34 | localStorage.setItem('Alert', JSON.stringify("Showed"));
35 | }, 2000);
36 |
37 | function ClassSwicher(Bar: string) {
38 | switch (Bar) {
39 | case 'none':
40 | return 'BarDisable'
41 | case 'GameBar':
42 | return 'GameBar'
43 | case 'DontShow':
44 | return 'DontShow'
45 | case 'Show':
46 | return 'Show'
47 | }
48 | }
49 |
50 | return (
51 |
50 |
52 |
55 |
57 |
60 |
83 |
61 |
62 |
82 |
63 |
64 |
72 |
80 |
81 |
86 |
98 |
87 |
97 |
88 |
95 |
96 |
52 |
57 |
58 |
59 |
68 |
69 |
78 |
79 |
104 |
105 |
106 | );
107 | };
108 |
109 | export default AccountData;
110 |
--------------------------------------------------------------------------------
/src/game/TicTacToe/Board/Board.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Square from "../Square/Square";
3 | import "./Board.css";
4 |
5 | function Board({ setScores }) {
6 | const [nodes, setNodes] = useState({});
7 | const [board, setBoard] = useState(Array(9).fill(""));
8 | const [winLine, setWinLine] = useState([]);
9 |
10 | const gameReset = () => {
11 | setWinLine([]);
12 | setBoard(Array(9).fill(""));
13 | };
14 |
15 | const getAvailableMoves = (board) => {
16 | const moves = [];
17 | board.forEach((cell, index) => {
18 | if (!cell) moves.push(index);
19 | });
20 | return moves;
21 | };
22 |
23 | const handleClick = (id) => {
24 | if (
25 | isTerminal(board).winner === "X" ||
26 | isTerminal(board).winner === "O" ||
27 | isFull(board)
28 | ) {
29 | gameReset();
30 | return;
31 | }
32 |
33 | if (board[id] !== "") return;
34 |
35 | let editedBoard = [...board];
36 | editedBoard[id] = "X";
37 |
38 | setBoard(editedBoard);
39 |
40 | if (isTerminal(editedBoard).winner === "X") {
41 | console.log(isTerminal(editedBoard));
42 | setWinLine(isTerminal(editedBoard).winLine);
43 | setScores((prevState) => ({ ...prevState, x: prevState.x + 1 }));
44 | return;
45 | }
46 |
47 | let randomNumber = getBestMove(editedBoard, 0, false);
48 | if (editedBoard[randomNumber] === "") {
49 | editedBoard[randomNumber] = "O";
50 | }
51 |
52 | setBoard(editedBoard);
53 |
54 | if (isTerminal(editedBoard).winner === "O") {
55 | setWinLine(isTerminal(editedBoard).winLine);
56 | setScores((prevState) => ({ ...prevState, o: prevState.o + 1 }));
57 | return;
58 | }
59 |
60 | if (isTerminal(editedBoard).winner === "draw") {
61 | setScores((prevState) => ({ ...prevState, tie: prevState.tie + 1 }));
62 | }
63 | };
64 |
65 | const isEmpty = (board) => {
66 | return board.every((cell) => !cell);
67 | };
68 |
69 | const isFull = (board) => {
70 | return board.every((cell) => cell);
71 | };
72 |
73 | const isTerminal = (board) => {
74 | if (isEmpty(board)) return false;
75 |
76 | if (board[0] === board[1] && board[0] === board[2] && board[0]) {
77 | return { winner: board[0], winLine: [0, 1, 2] };
78 | }
79 | if (board[3] === board[4] && board[3] === board[5] && board[3]) {
80 | return { winner: board[3], winLine: [3, 4, 5] };
81 | }
82 | if (board[6] === board[7] && board[6] === board[8] && board[6]) {
83 | return { winner: board[6], winLine: [6, 7, 8] };
84 | }
85 |
86 | if (board[0] === board[3] && board[0] === board[6] && board[0]) {
87 | return { winner: board[0], winLine: [0, 3, 6] };
88 | }
89 | if (board[1] === board[4] && board[1] === board[7] && board[1]) {
90 | return { winner: board[1], winLine: [1, 4, 7] };
91 | }
92 | if (board[2] === board[5] && board[2] === board[8] && board[2]) {
93 | return { winner: board[2], winLine: [2, 5, 8] };
94 | }
95 |
96 | if (board[0] === board[4] && board[0] === board[8] && board[0]) {
97 | return { winner: board[0], winLine: [0, 4, 8] };
98 | }
99 | if (board[2] === board[4] && board[2] === board[6] && board[2]) {
100 | return { winner: board[2], winLine: [2, 4, 6] };
101 | }
102 |
103 | if (isFull(board)) {
104 | return { winner: "draw" };
105 | }
106 |
107 | return false;
108 | };
109 |
110 | const getBestMove = (newBoard, depth, isMax, callback = () => {}) => {
111 | if (depth === 0) setNodes({});
112 |
113 | if (isTerminal(newBoard) || depth === -1) {
114 | if (isTerminal(newBoard).winner === "X") {
115 | return 100 - depth;
116 | } else if (isTerminal(newBoard).winner === "O") {
117 | return -100 + depth;
118 | }
119 | return 0;
120 | }
121 |
122 | if (isMax) {
123 | let best = -100;
124 |
125 | getAvailableMoves(newBoard).forEach((index) => {
126 | let child = [...newBoard];
127 | child[index] = "X";
128 |
129 | let score = getBestMove(child, depth + 1, false, callback);
130 | best = Math.max(best, score);
131 | });
132 |
133 | return best;
134 | }
135 |
136 | if (!isMax) {
137 | let best = 100;
138 |
139 | getAvailableMoves(newBoard).forEach((index) => {
140 | let child = [...newBoard];
141 | child[index] = "O";
142 |
143 | let score = getBestMove(child, depth + 1, true, callback);
144 | best = Math.min(best, score);
145 |
146 | if (depth === 0) {
147 | console.log(nodes);
148 | const moves = nodes[score] ? `${nodes[score]},${index}` : index;
149 | nodes[score] = moves;
150 | }
151 | });
152 | if (depth === 0) {
153 | let returnValue;
154 |
155 | if (typeof nodes[best] === "string") {
156 | const arr = nodes[best].split(",");
157 | const rand = Math.floor(Math.random() * arr.length);
158 | returnValue = arr[rand];
159 | } else {
160 | returnValue = nodes[best];
161 | }
162 |
163 | callback(returnValue);
164 | return returnValue;
165 | }
166 | return best;
167 | }
168 | };
169 |
170 | return (
171 |
60 | {
61 | GameState.game = "none"
62 | GameState.parentDiv = "DontShow"
63 | GameSet({...GameState})
64 | }}/>
65 |
67 |
70 | {
71 | GameState.game = "none"
72 | GameState.parentDiv = "DontShow"
73 | GameSet({...GameState})
74 | }}/>
75 |
77 |
80 |
103 |
81 |
82 |
102 |
83 |
84 |
92 |
100 |
101 |
172 | {board.map((val, i) => {
173 | return (
174 |
184 | );
185 | }
186 |
187 | export default Board;
188 |
--------------------------------------------------------------------------------
/src/store/Tasks.store.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Action,
3 | createSlice,
4 | Dispatch,
5 | MiddlewareAPI,
6 | PayloadAction,
7 | } from "@reduxjs/toolkit";
8 | import { Task } from "../interfaces";
9 |
10 | const defaultTasks: Task[] = [
11 | {
12 | title: "Task One",
13 | important: false,
14 | description: "Write your description",
15 | date: "2023-07-22",
16 | dir: "Main",
17 | completed: true,
18 | id: "Task1",
19 | }
20 | ];
21 |
22 | const getSavedDirectories = (): string[] => {
23 | let dirList: string[] = [];
24 | if (localStorage.getItem("directories")) {
25 | dirList = JSON.parse(localStorage.getItem("directories")!);
26 | const mainDirExists = dirList.some((dir: string) => dir === "Main");
27 | if (!mainDirExists) {
28 | dirList.push("Main");
29 | }
30 | } else {
31 | dirList.push("Main");
32 | }
33 |
34 | if (localStorage.getItem("tasks")) {
35 | const savedTasksList = JSON.parse(localStorage.getItem("tasks")!);
36 | let dirNotSaved: string[] = [];
37 | savedTasksList.forEach((task: Task) => {
38 | if (!dirList.includes(task.dir)) {
39 | if (!dirNotSaved.includes(task.dir)) {
40 | dirNotSaved.push(task.dir);
41 | }
42 | }
43 | });
44 | dirList = [...dirList, ...dirNotSaved];
45 | }
46 | return dirList;
47 | };
48 |
49 | const initialState: {
50 | tasks: Task[];
51 | directories: string[];
52 | } = {
53 | tasks: localStorage.getItem("tasks")
54 | ? JSON.parse(localStorage.getItem("tasks")!)
55 | : defaultTasks,
56 | directories: getSavedDirectories(),
57 | };
58 |
59 | const tasksSlice = createSlice({
60 | name: "tasks",
61 | initialState: initialState,
62 | reducers: {
63 | addNewTask(state, action: PayloadAction
168 |
179 | );
180 | }
181 |
182 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: IranSans;
3 | src: url(./assets/Font/Sans_a4fran3.woff);
4 | font-weight: bold;
5 | }
6 | * {
7 | font-family: "IranSans" !important;
8 | }
9 |
10 | @tailwind base;
11 | @tailwind components;
12 | @tailwind utilities;
13 |
14 | .inputStyles {
15 | @apply bg-slate-100 text-slate-600 dark:text-slate-200 rounded-lg p-3 outline-transparent border-2 border-transparent hover:border-violet-600 focus:border-violet-600 focus:outline-none transition dark:bg-slate-800;
16 | }
17 |
18 | .btn {
19 | @apply bg-yellow-500 hover:bg-yellow-500 py-3 px-6 text-slate-50 rounded-lg w-auto transition dark:bg-yellow-600 dark:hover:bg-yellow-700;
20 | }
21 |
22 | .btn:active {
23 | @apply scale-95;
24 | }
25 |
26 | @layer components {
27 | .tasksList > li:first-of-type article {
28 | @apply bg-yellow-500 text-violet-700 dark:bg-yellow-500;
29 | }
30 |
31 | .tasksList > li:first-of-type article .description {
32 | @apply text-violet-700;
33 | }
34 |
35 | .tasksList > li:first-of-type article > div {
36 | @apply border-slate-900 dark:border-slate-900;
37 | }
38 |
39 | .listView1 article {
40 | @apply h-40;
41 | }
42 |
43 | .listView2 article {
44 | @apply h-64;
45 | }
46 |
47 | .children-styles {
48 | @apply text-yellow-400;
49 | }
50 |
51 | .children-styles button {
52 | @apply p-1;
53 | }
54 |
55 | .children-styles svg {
56 | @apply w-6 h-6;
57 | }
58 |
59 | .inputStyles::placeholder {
60 | @apply text-slate-400 dark:text-slate-400;
61 | }
62 |
63 | .stylesInputsField input,
64 | .stylesInputsField textarea,
65 | .stylesInputsField select {
66 | @apply inputStyles mt-1;
67 | }
68 |
69 | .stylesInputsField label {
70 | @apply mb-4 text-slate-600 dark:text-slate-500;
71 | }
72 |
73 | .barProgress {
74 | @apply bg-slate-400 w-full h-3 rounded-full overflow-hidden dark:bg-slate-600/[.3];
75 | }
76 |
77 | .barProgress > div {
78 | @apply bg-yellow-500 h-full;
79 | }
80 |
81 | .itemDirectory > .buttonsDir {
82 | @apply xl:opacity-0 transition opacity-100;
83 | }
84 |
85 | .itemDirectory:hover > .buttonsDir {
86 | @apply opacity-100;
87 | }
88 | }
89 |
90 | /* clears the 'X' from Internet Explorer */
91 | input[type="search"]::-ms-clear {
92 | display: none;
93 | width: 0;
94 | height: 0;
95 | }
96 |
97 | input[type="search"]::-ms-reveal {
98 | display: none;
99 | width: 0;
100 | height: 0;
101 | }
102 |
103 | /* clears the 'X' from Chrome */
104 | input[type="search"]::-webkit-search-decoration,
105 | input[type="search"]::-webkit-search-cancel-button,
106 | input[type="search"]::-webkit-search-results-button,
107 | input[type="search"]::-webkit-search-results-decoration {
108 | display: none;
109 | }
110 |
111 | ::-webkit-scrollbar {
112 | @apply w-2;
113 | }
114 |
115 | /* Track */
116 | ::-webkit-scrollbar-track {
117 | @apply bg-slate-200 dark:bg-slate-800;
118 | }
119 |
120 | /* Handle */
121 | ::-webkit-scrollbar-thumb {
122 | @apply bg-slate-300 dark:bg-slate-700 rounded-md border border-red-400;
123 | }
124 |
125 | /* Handle on hover */
126 | ::-webkit-scrollbar-thumb:hover {
127 | @apply bg-slate-400 dark:bg-slate-600;
128 | }
129 |
130 | .copyright-text > a {
131 | color: rgba(251, 175, 67, 0.99);
132 | }
133 |
134 | .marginer > a {
135 | margin-left: 15px;
136 | }
137 |
138 | .BarDisable {
139 | display: none;
140 | }
141 |
142 | .GameBar {
143 | height: 20vh;
144 | background-color: rgba(121, 91, 245, 0.2);
145 | border-radius: 50px;
146 | border-top-right-radius: 0px;
147 | top: 50%;
148 | left: 50%;
149 | transform: translate(-50%, -50%);
150 | position: fixed;
151 | z-index: 100;
152 | }
153 | .CenterGamer{
154 | padding-right: 4vw;
155 | }
156 |
157 | .DontShow {
158 | display: none;
159 | }
160 |
161 | .Show {
162 | background-color: rgba(121, 91, 245, 0.2);
163 | position: fixed;
164 | top: 50%;
165 | left: 50%;
166 | transform: translate(-50%, -50%);
167 | z-index: 20;
168 | width: 110%;
169 | overflow: auto;
170 | height: 100vh;
171 | }
172 |
173 |
174 | .xIconMini {
175 | width: 25px;
176 | height: 25px;
177 | position: relative;
178 | left: 100%;
179 | border-bottom-left-radius: 10px;
180 | transform: translate(-25px, 0%);
181 | background-color: rgba(229, 131, 131, 0.37);
182 | }
183 |
184 | .xIconBig {
185 | width: 80px;
186 | height: 80px;
187 | position: relative;
188 | left: 100%;
189 | transform: translate(-200px, 10px);
190 | }
191 | .SocialButton{
192 | background-color:rgba(251, 175, 67,1);
193 | border-radius: 50px;
194 | border-bottom-left-radius: 5px;
195 | display: flex;
196 | justify-content: center;
197 | align-items: center;
198 | position: fixed;
199 | bottom: 0;
200 | left: 0;
201 | z-index: 9999999;
202 | height: 50px;
203 | width: 50px;
204 | }
205 | .SocialIcon{
206 | height: 40px;
207 | width: 40px;
208 | }
209 | @media only screen and (max-width: 728px) {
210 | .xIconBig {
211 | width: 35px;
212 | height: 35px;
213 | position: relative;
214 | left: 50%;
215 | top: 5%;
216 | transform: translate(-50%, 0%);
217 | }
218 | }
219 |
220 | .xIconBig:active {
221 | border-radius: 50px;
222 | color: red;
223 | }
224 |
225 | .xIconMini:hover {
226 | background-color: rgb(182, 53, 81);
227 | }
228 |
229 | .xIconMini:active {
230 | background-color: rgb(255, 0, 0);
231 | }
232 | .centered{
233 | position: relative;
234 | top: 50%;
235 | left: 50%;
236 | transform: translate(-50%, -50%);
237 | }
238 | .button-29 {
239 | align-items: center;
240 | appearance: none;
241 | background-image: radial-gradient(100% 100% at 100% 0, rgba(173, 122, 51, 0.73) 0, #5468ff 100%);
242 | border: 0;
243 | border-radius: 6px;
244 | box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
245 | box-sizing: border-box;
246 | color: #fff;
247 | cursor: pointer;
248 | display: inline-flex;
249 | font-family: "JetBrains Mono", monospace;
250 | height: 100px;
251 | justify-content: center;
252 | line-height: 1;
253 | list-style: none;
254 | overflow: hidden;
255 | padding-left: 16px;
256 | padding-right: 16px;
257 | position: relative;
258 | text-align: left;
259 | text-decoration: none;
260 | transition: box-shadow .15s, transform .15s;
261 | user-select: none;
262 | -webkit-user-select: none;
263 | touch-action: manipulation;
264 | white-space: nowrap;
265 | will-change: box-shadow, transform;
266 | font-size: 18px;
267 | }
268 |
269 | .button-29:focus {
270 | box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
271 | }
272 |
273 | .button-29:hover {
274 | box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
275 |
276 | }
277 |
278 | .button-29:active {
279 | box-shadow: #3c4fe0 0 3px 7px inset;
280 | }
281 |
282 | .ForCenter {
283 | display: flex;
284 | justify-content: center;
285 | text-align: center;
286 | align-items: center;
287 | width: 25%;
288 | left: 100%;
289 | transform: translate(-50%, 0%);
290 | }
291 |
292 | .maxAccount {
293 | max-width: 100%;
294 | height: 85%;
295 | border-radius: 1rem;
296 | background-color: #eab308;
297 | }
298 | .justifyedGrid{
299 | justify-content: space-evenly;
300 | justify-items: center;
301 | align-content: space-evenly;
302 | align-items: center;
303 | position: relative;
304 | left:50%;
305 | transform: translate(-50%, 0%);
306 | }
307 | .parent {
308 | display: flex;
309 | flex-direction: row;
310 | }
311 | .child {
312 | display: inline-block;
313 | margin: 5px;
314 | padding: 1rem 1rem;
315 | vertical-align: middle;
316 | }
317 | .GameBarBtnMobile {
318 | background-color: #EAB308;
319 | color: #6D28D9;
320 | font-weight: bold;
321 | border: none;
322 | border-radius: 5px;
323 | letter-spacing: 4px;
324 | transition: 0.5s;
325 | cursor: pointer;
326 | }
327 | .GameBarBtn {
328 | padding: 15px 15px;
329 | background-color: #EAB308;
330 | color: #6D28D9;
331 | font-weight: bold;
332 | border: none;
333 | border-radius: 5px;
334 | letter-spacing: 4px;
335 | transition: 0.5s;
336 | cursor: pointer;
337 | }
338 | .scroler{
339 | overflow-y: scroll;
340 | }
341 | .GameBarBtns:hover {
342 | background: #6D28D9;
343 | box-shadow: 0 0 5px #6D28D9,
344 | 0 0 25px #6D28D9,
345 | 0 0 50px #6D28D9,
346 | 0 0 200px #6D28D9;
347 | }
348 |
349 | .GameBarIcon {
350 | width: 25px;
351 | height: 25px;
352 | display: flex;
353 | justify-content: center;
354 | align-items: center;
355 | text-align: center;
356 | }
357 | .GameBarIconMobile {
358 | width: 25px;
359 | height: 25px;
360 | display: flex;
361 | justify-content: center;
362 | align-items: center;
363 | text-align: center;
364 | position: relative;
365 | left: 50%;
366 | transform: translate(-50%, 0%);
367 | }
368 |
369 | .ScrollBars {
370 | overflow: visible;
371 | }
372 | .screender{
373 | width: 100vw !important;
374 | height: 100vh !important;
375 | }
376 |
377 |
378 |
379 | .GameBarMobile {
380 | width: 75vw;
381 | height: 50vh;
382 | border-radius: 50px;
383 | top: 50%;
384 | left: 50%;
385 | transform: translate(-50%, -50%);
386 | overflow: auto;
387 | position: fixed;
388 | display: flex;
389 | flex-direction: column;
390 | justify-content: center;
391 | align-items: center;
392 | text-align: center;
393 | z-index: 100;
394 | }
395 |
396 | .xTop {
397 | position: absolute;
398 | left: 50%;
399 | transform: translate(-50%, 0%);
400 | z-index: 99999;
401 | }
402 |
403 |
--------------------------------------------------------------------------------
169 |
175 |
176 |
177 |
178 |
170 |
171 |
174 |