add fonts, table image, setting icon

2025-06-03 12:56:10 +05:00
parent 07b8576d26
commit a2bc0b13f0
21 changed files with 412 additions and 43 deletions
@@ -1 +1 @@
-VITE_API_URL=http://localhost:3000
+VITE_API_URL=http://192.168.1.170:3000
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-DmBd'; font-weight: 600; font-style: normal;">☝︎TT Hoves Pro DemiBold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-DmBd';
+    font-weight: 600;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-DmBd.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-DmBd'; font-weight: 600; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-Md'; font-weight: 500; font-style: normal;">☝︎TT Hoves Pro Medium</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-Md';
+    font-weight: 500;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-Md.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-Md'; font-weight: 500; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-Rg'; font-weight: normal; font-style: normal;">☝︎TT Hoves Pro Regular</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-Rg';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-Rg.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-Rg'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
@@ -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;
+}
@@ -0,0 +1,9 @@
+function Badge({ count }: { count: number }) {
+  return (
+    <div className='w-[1.389vw] h-[1.389vw] rounded-full bg-[#F8F7FE] caption-xs text-[#7B60F3] flex justify-center items-center'>
+      {count}
+    </div>
+  );
+}
+
+export default Badge;
@@ -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 (
-    <div className="p-[1.111vw] rounded-[0.833vw] flex flex-col justify-between gap-[1.111vw] aspect-[272/149] w-[25.208vw] border border-[#00000014]">
-      <div className="flex justify-between items-start">
-        <div className="space-y-[0.278vw]">
-          <p className="leading-none text-[1.111vw]">{server.name}</p>
-          <p className="opacity-50 leading-none text-[0.694vw]">
-            {server.location}
-          </p>
+    <div className='flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]'>
+      <div className='relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]'>
+        <span className='absolute top-[1.111vw] right-[1.111vw] w-[0.972vw] h-[0.972vw] cursor-pointer text-[#7D7D7D]'>
+          <SettingIcon />
+        </span>
+      </div>
+      <div className='flex self-center justify-between items-start'>
+        <div className='space-y-[0.278vw] text-center'>
+          <p className='leading-none text-[1.111vw] title-s'>{server.name}</p>
+          <p className='caption-s text-[#7D7D7D]'>{server.location}</p>
        </div>
-        <Button
+        {/* <Button
          onlyIcon
-          size="small"
-          className="rounded-[0.278vw] bg-[#F5F5F5]"
+          size='small'
+          className='rounded-[0.278vw] bg-[#F5F5F5]'
        >
-          <div className="min-w-[0.833vw] min-h-[0.833vw] text-black">
+          <div className='min-w-[0.833vw] min-h-[0.833vw] text-black'>
            <MoreIcon />
          </div>
-        </Button>
+        </Button> */}
      </div>
-      <div className="flex justify-between items-center">
-        <div className="space-y-[0.556vw]">
-          <div className="px-[0.556vw] py-[0.278vw] flex gap-[0.278vw] items-center bg-[#108C330D] rounded-[0.278vw] w-fit">
+      <div className='flex justify-between items-center'>
+        <div className='space-y-[0.556vw]'>
+          {/* <div className='px-[0.556vw] py-[0.278vw] flex gap-[0.278vw] items-center bg-[#108C330D] rounded-[0.278vw] w-fit'>
            {server.sessions?.[0]?.status === "started" && (
-              <div className="rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]" />
+              <div className='rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]' />
            )}
-            <p className="font-medium leading-none text-[#108C33] text-[0.556vw]">
+            <p className='font-medium leading-none text-[#108C33] text-[0.556vw]'>
              {server.sessions?.[0]?.status === "started"
                ? "Сеанс запущен"
                : "Свободен"}
            </p>
-          </div>
+          </div> */}
          {server.sessions?.[0]?.status === "started" && (
            <>
-              <p className="leading-none">
+              <p className='leading-none'>
                {server.sessions?.[0]?.client?.fullname}
              </p>
-              <p className="opacity-40 leading-none">
+              <p className='opacity-40 leading-none'>
                {server.sessions?.[0]?.app?.name}
              </p>
            </>
          )}
        </div>
-        <p className="opacity-40">0 мин</p>
+        {/* <p className='opacity-40'>0 мин</p> */}
      </div>
-      <div className="flex gap-[0.278vw]">
+      <div className='flex gap-[0.278vw]'>
        {server.sessions?.[0]?.status === "started" ? (
-          <div className="flex items-center gap-[0.278vw]">
+          <div className='flex items-center gap-[0.278vw]'>
            {/* <Button
              variant="secondary"
              className="py-[0.694vw] border rounded-lg border-[#2D68F6] w-full"
@@ -98,26 +102,26 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
              </p>
            </Button> */}
            <Button
-              variant="secondary"
-              className="py-[0.694vw] border rounded-lg border-[#DC0404] w-full"
+              variant='secondary'
+              className='py-[0.694vw] border rounded-lg border-[#DC0404] w-full'
              onClick={() => endSession()}
            >
-              <p className="text-center leading-none font-medium text-[#DC0404]">
+              <p className='text-center leading-none font-medium text-[#DC0404]'>
                Завершить сеанс
              </p>
            </Button>
          </div>
        ) : (
          <Button
-            variant="primary"
-            className="bg-[#798FFF] w-full rounded-[0.556vw]"
+            variant='primary'
+            className='bg-[#798FFF] w-full rounded-[0.556vw]'
            onClick={handleClickCreateSession}
          >
-            <div className="flex gap-1 items-center">
-              <span className="w-[1.389vw] h-[1.389vw]">
+            <div className='flex gap-1 items-center'>
+              <span className='w-[1.389vw] h-[1.389vw]'>
                <PlusIcon />
              </span>
-              <p className="font-medium leading-[115%]">Начать сеанс</p>
+              <p className='font-medium leading-[115%]'>Создать сеанс</p>
            </div>
          </Button>
        )}
@@ -0,0 +1,20 @@
+function SettingIcon() {
+  return (
+    <svg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M5.3331 12.5916C4.3557 12.3006 3.48568 11.7604 2.79679 11.0446C3.05378 10.74 3.20866 10.3464 3.20866 9.91671C3.20866 8.95021 2.42516 8.16671 1.45866 8.16671C1.40019 8.16671 1.3424 8.16959 1.28541 8.17519C1.20776 7.79559 1.16699 7.4026 1.16699 7.00004C1.16699 6.39028 1.26055 5.80237 1.4341 5.24987C1.44227 5.24998 1.45046 5.25004 1.45866 5.25004C2.42516 5.25004 3.20866 4.46654 3.20866 3.50004C3.20866 3.22258 3.14408 2.96022 3.02917 2.72713C3.70376 2.09987 4.52714 1.63043 5.44052 1.37759C5.72994 1.9449 6.31978 2.33338 7.00033 2.33338C7.68087 2.33338 8.27071 1.9449 8.56013 1.37759C9.47351 1.63043 10.2969 2.09987 10.9715 2.72713C10.8566 2.96022 10.792 3.22258 10.792 3.50004C10.792 4.46654 11.5755 5.25004 12.542 5.25004C12.5502 5.25004 12.5584 5.24998 12.5666 5.24987C12.7401 5.80237 12.8337 6.39028 12.8337 7.00004C12.8337 7.4026 12.7929 7.79559 12.7152 8.17519C12.6583 8.16959 12.6005 8.16671 12.542 8.16671C11.5755 8.16671 10.792 8.95021 10.792 9.91671C10.792 10.3464 10.9469 10.74 11.2039 11.0446C10.515 11.7604 9.64495 12.3006 8.66755 12.5916C8.44198 11.886 7.78083 11.375 7.00033 11.375C6.21983 11.375 5.55868 11.886 5.3331 12.5916Z'
+        stroke='currentColor'
+        strokeWidth={1.2}
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6.99967 9.04168C8.12726 9.04168 9.04134 8.12759 9.04134 7.00001C9.04134 5.87243 8.12726 4.95834 6.99967 4.95834C5.87209 4.95834 4.95801 5.87243 4.95801 7.00001C4.95801 8.12759 5.87209 9.04168 6.99967 9.04168Z'
+        stroke='currentColor'
+        strokeWidth={1.2}
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}
+
+export default SettingIcon;
@@ -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%];
+}
@@ -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 (
-    <div className="p-[0.833vw] flex gap-[0.833vw] min-h-dvh">
-      <div className="w-[3.333vw] flex flex-col justify-between"></div>
-      <div className="bg-white w-full rounded-[1.667vw] border border-black/5 p-[1.667vw] flex justify-between">
-        <div className="w-[13.889vw] space-y-[1.667vw]">
+    <div className='p-[0.833vw] flex gap-[0.833vw] min-h-dvh'>
+      <div className='w-[3.333vw] flex flex-col justify-between'></div>
+      <div className='bg-white w-full rounded-[1.667vw] border border-black/5 p-[1.667vw] flex justify-between'>
+        {/* <div className="w-[13.889vw] space-y-[1.667vw]">
          <div className="px-[1.111vw] py-[0.556vw]">
            <img
              src="/logo-mate.svg"
@@ -44,15 +44,19 @@ function DashboardPage() {
            />
          </div>
          <Sidebar />
-        </div>
-        <div className="w-[38.889vw]">
-          <div className="space-y-4">
+        </div> */}
+        <div className='w-[42.5vw] flex flex-col gap-[1.667vw]'>
+          <div className='flex items-center gap-[0.833vw]'>
+            <h1 className='title-l font-[500] '>Интерактивные столы</h1>
+            <Badge count={servers?.length || 0} />
+          </div>
+          <div className='flex gap-[0.833vw] flex-wrap'>
            {servers?.map((server) => (
              <DesktopCard key={server.id} server={server} />
            ))}
          </div>
        </div>
-        <div className="bg-green-200 w-[13.889vw]">...</div>
+        <div className='bg-green-200 w-[13.889vw]'>...</div>
      </div>
    </div>
  );