diff --git a/.env b/.env index cd41370..9c07060 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -VITE_API_URL=http://localhost:3000 \ No newline at end of file +VITE_API_URL=http://192.168.1.170:3000 \ No newline at end of file diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot new file mode 100644 index 0000000..5cc5eea Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf new file mode 100644 index 0000000..45ab33d Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff new file mode 100644 index 0000000..bf0549a Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 new file mode 100644 index 0000000..ac58b1f Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.eot b/public/fonts/TTHovesProAll/TTHovesPro-Md.eot new file mode 100644 index 0000000..37c2ee7 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf b/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf new file mode 100644 index 0000000..96896b5 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.woff b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff new file mode 100644 index 0000000..dba766b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 new file mode 100644 index 0000000..df64d2f Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot b/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot new file mode 100644 index 0000000..128b76b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf b/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf new file mode 100644 index 0000000..e41a50e Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff new file mode 100644 index 0000000..fb1b27b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 new file mode 100644 index 0000000..2550fa8 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 differ diff --git a/public/fonts/TTHovesProAll/demo.html b/public/fonts/TTHovesProAll/demo.html new file mode 100644 index 0000000..a5b323f --- /dev/null +++ b/public/fonts/TTHovesProAll/demo.html @@ -0,0 +1,250 @@ + + + + + + + + + Transfonter demo + + + + +
+
+

☝︎TT Hoves Pro DemiBold

+ 
.your-style {
+    font-family: 'TTHovesPro-DmBd';
+    font-weight: 600;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-DmBd.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

☝︎TT Hoves Pro Medium

+ 
.your-style {
+    font-family: 'TTHovesPro-Md';
+    font-weight: 500;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-Md.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

☝︎TT Hoves Pro Regular

+ 
.your-style {
+    font-family: 'TTHovesPro-Rg';
+    font-weight: normal;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-Rg.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+ + diff --git a/public/fonts/TTHovesProAll/stylesheet.css b/public/fonts/TTHovesProAll/stylesheet.css new file mode 100644 index 0000000..4440c8c --- /dev/null +++ b/public/fonts/TTHovesProAll/stylesheet.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'TTHovesPro'; + src: url('TTHovesPro-DmBd.eot'); + src: + url('TTHovesPro-DmBd.eot?#iefix') format('embedded-opentype'), + url('TTHovesPro-DmBd.woff2') format('woff2'), + url('TTHovesPro-DmBd.woff') format('woff'), + url('TTHovesPro-DmBd.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'TTHovesPro'; + src: url('TTHovesPro-Md.eot'); + src: + url('TTHovesPro-Md.eot?#iefix') format('embedded-opentype'), + url('TTHovesPro-Md.woff2') format('woff2'), + url('TTHovesPro-Md.woff') format('woff'), + url('TTHovesPro-Md.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'TTHovesPro'; + src: url('TTHovesPro-Rg.eot'); + src: + url('TTHovesPro-Rg.eot?#iefix') format('embedded-opentype'), + url('TTHovesPro-Rg.woff2') format('woff2'), + url('TTHovesPro-Rg.woff') format('woff'), + url('TTHovesPro-Rg.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} diff --git a/public/images/Table.png b/public/images/Table.png new file mode 100644 index 0000000..5aacb8e Binary files /dev/null and b/public/images/Table.png differ diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx new file mode 100644 index 0000000..f044e9e --- /dev/null +++ b/src/components/Badge.tsx @@ -0,0 +1,9 @@ +function Badge({ count }: { count: number }) { + return ( +
+ {count} +
+ ); +} + +export default Badge; diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index 48364ed..d33be81 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -6,6 +6,7 @@ import PlusIcon from "./icons/PlusIcon"; import { IServer } from "../types/IServer"; import useModalStore from "../stores/useModalStore"; import CreateSessionModal from "./modals/CreateSessionModal"; +import SettingIcon from "./icons/SettingIcon"; interface IDesktopCardProps { server: IServer; @@ -43,52 +44,55 @@ export default function DesktopCard({ server }: IDesktopCardProps) { } return ( -
-
-
-

{server.name}

-

- {server.location} -

+
+
+ + + +
+
+
+

{server.name}

+

{server.location}

- + */}
-
-
-
+
+
+ {/*
{server.sessions?.[0]?.status === "started" && ( -
+
)} -

+

{server.sessions?.[0]?.status === "started" ? "Сеанс запущен" : "Свободен"}

-
+
*/} {server.sessions?.[0]?.status === "started" && ( <> -

+

{server.sessions?.[0]?.client?.fullname}

-

+

{server.sessions?.[0]?.app?.name}

)}
-

0 мин

+ {/*

0 мин

*/}
-
+
{server.sessions?.[0]?.status === "started" ? ( -
+
{/* */}
) : ( )} diff --git a/src/components/icons/SettingIcon.tsx b/src/components/icons/SettingIcon.tsx new file mode 100644 index 0000000..a8b124c --- /dev/null +++ b/src/components/icons/SettingIcon.tsx @@ -0,0 +1,20 @@ +function SettingIcon() { + return ( + + + + + ); +} + +export default SettingIcon; diff --git a/src/index.css b/src/index.css index 8063db2..3a6d2e3 100644 --- a/src/index.css +++ b/src/index.css @@ -1,11 +1,55 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +@import url(/fonts/TTHovesProAll/stylesheet.css); @import "tailwindcss"; body { - font-family: "Inter", sans-serif; + font-family: "TTHovesPro", sans-serif; background-color: #f2f0fe; } button { cursor: pointer; } + +@utility title-l { + @apply 2xl:text-[1.667vw] text-[24px] leading-[120%]; +} + +@utility title-m { + @apply 2xl:text-[1.389vw] text-[20px] leading-[110%]; +} + +@utility title-s { + @apply 2xl:text-[1.111vw] text-[16px] leading-[110%]; +} + +@utility text-m { + @apply 2xl:text-[1.111vw] text-[16px] leading-[120%]; +} + +@utility text-s { + @apply 2xl:text-[0.972vw] text-[14px] leading-[110%]; +} + +@utility text-xs { + @apply 2xl:text-[0.833vw] text-[12px] leading-[110%]; +} + +@utility button-m { + @apply 2xl:text-[0.972vw] text-[14px] leading-[110%]; +} + +@utility button-s { + @apply 2xl:text-[0.833vw] text-[12px] leading-[110%]; +} + +@utility caption-m { + @apply 2xl:text-[0.972vw] text-[14px] leading-[120%]; +} + +@utility caption-s { + @apply 2xl:text-[0.833vw] text-[12px] leading-[120%]; +} + +@utility caption-xs { + @apply 2xl:text-[0.694vw] text-[10px] leading-[120%]; +} diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index 72484df..b8ca022 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -1,9 +1,9 @@ import { useQuery } from "@tanstack/react-query"; import { IUser } from "../types/IUser"; import api from "../utils/api"; -import Sidebar from "../components/Sidebar"; import { IServer } from "../types/IServer"; import DesktopCard from "../components/DesktopCard"; +import Badge from "../components/Badge"; function DashboardPage() { const { data: me } = useQuery({ @@ -32,10 +32,10 @@ function DashboardPage() { // } return ( -
-
-
-
+
+
+
+ {/*
-
-
-
+
*/} +
+
+

Интерактивные столы

+ +
+
{servers?.map((server) => ( ))}
-
...
+
...
);